微信小程序-1-微信开发者工具环境搭建和初始化创建项目

皮皮冰燃2025-09-12 10:15

文章目录

  • [1 小程序概述](#1 小程序概述)
    • [1.1 什么是微信小程序](#1.1 什么是微信小程序)
    • [1.2 大前端概念](#1.2 大前端概念)
    • [1.3 账号注册](#1.3 账号注册)
    • [1.4 开发流程](#1.4 开发流程)
    • [1.5 小程序成员](#1.5 小程序成员)
  • [2 创建项目](#2 创建项目)
    • [2.1 创建项目流程](#2.1 创建项目流程)
    • [2.2 创建项目](#2.2 创建项目)
    • [2.3 本地开发支持http](#2.3 本地开发支持http)
  • [3 项目目录](#3 项目目录)
    • [3.1 项目目录结构](#3.1 项目目录结构)
    • [3.2 配置文件](#3.2 配置文件)
      • [3.2.1 app.json(全局配置)](#3.2.1 app.json(全局配置))
      • [3.2.2 xxx.json(页面配置)](#3.2.2 xxx.json(页面配置))
      • [3.2.3 project.config.json(项目配置)](#3.2.3 project.config.json(项目配置))
      • [3.2.4 搜索相关配置](#3.2.4 搜索相关配置)
    • [3.3 WebView渲染模式](#3.3 WebView渲染模式)
    • [3.4 新建页面](#3.4 新建页面)
    • [3.4 默认启动页面](#3.4 默认启动页面)
    • [3.5 调试小程序](#3.5 调试小程序)
      • [3.5.1 调试基础库](#3.5.1 调试基础库)
      • [3.5.2 调试窗口](#3.5.2 调试窗口)
      • [3.5.3 真机调试](#3.5.3 真机调试)
    • [3.6 纯净项目](#3.6 纯净项目)
      • [3.6.1 app.js](#3.6.1 app.js)
      • [3.6.2 app.json](#3.6.2 app.json)
      • [3.6.3 app.wxss(空的)](#3.6.3 app.wxss(空的))
      • [3.6.4 pages/index/index.js](#3.6.4 pages/index/index.js)
      • [3.6.5 pages/index/index.json](#3.6.5 pages/index/index.json)
      • [3.6.6 pages/index/index.wxml](#3.6.6 pages/index/index.wxml)
      • [3.6.7 pages/index/index.wxss(空的)](#3.6.7 pages/index/index.wxss(空的))
  • [4 参考附录](#4 参考附录)

安装微信开发者工具、创建项目，介绍项目的配置文件，删除不需要的文件，只保留核心，用于从基础开发项目。

1 小程序概述

1.1 什么是微信小程序

微信小程序是一种运行在微信内部的轻量级应用程序。

小程序无需下载和安装，只需要在微信中下拉，搜一搜或扫一扫搜索点击使用即可。

1.2 大前端概念

1、后端(后端接口)

(1)python的django框架。

(2)python的flask框架。

(3)python的fastapi框架。

(4)go的gin框架。

(5)go的beego框架。

(6)java的ssh框架。

(7)java的ssm框架。

(8)java的springboot框架。

2、前端(大前端)

(1)浏览器中访问的页面(web页面)--->html、css、js。

(2)安卓的app--->java。

(3)ios的app--->object C。

(4)微信小程序--->wxml、wxss、js。

(5)桌面端--->Qt平台(python、c++)。

(6)鸿蒙开发。

3、前端统一开发框架
(1)uni-app

国人推出，使用html、css、js，使用vue的语法，在uni-app平台开发，打包到安卓、ios、微信小程序、web端。

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者可以编写一套代码，就能发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/快手等)等多个平台。

(2)flutter

google推出，一处开发，编译到ios、安卓、桌面。

Flutter是由Google开发和维护的一个开源UI软件开发工具包(SDK)，用于构建跨平台的高性能、高保真的应用程序。

使用一套代码库，可以编译并运行在iOS、Android、Web、Windows、macOS和Linux等多个平台上，实现"一次编写，多端运行"。

我会python的django开发，我可以开发安卓app吗？可以开发微信小程序吗？

django可以作为它们的后端，但是前端还是需要单独开发。

1.3 账号注册

1、访问【微信公众平台】，注册一个微信小程序账号

2、申请账号需要准备一个邮箱，该邮箱要求：

未被微信公众平台注册。

未被微信开放平台注册。

未被个人微信号绑定过。

如果被绑定了需要解绑或使用其他邮箱。

3、微信小程序信息配置

注册成功后，需要打开微信公众平台对小程序账号进行一些设置。

小程序后续需要提交审核和上线，提交审核时，小程序账号信息是必填项，名称、图标、类目等。

小程序备案和微信认证。

1.4 开发流程

微信小程序--》本地开发环境--》线上环境。

(1)本地：微信开发者工具+Pycharm开发Django

(2)线上：

体验版：几个人体验，API需要在公网。

发布：备案，API需要在公网，全国各地人都可以用。

1.5 小程序成员

微信小程序成员分为两种：

(1)项目成员：表示参与小程序开发(我们)、运营的成员，包括运营者、开发者及数据分析者，项目成员可登陆微信公众后台，管理员可以在成员管理中添加、删除项目成员，并设置项目成员的角色。

(2)体验成员：表示参与小程序内测体验的成员，可使用体验版小程序，但不属于项目成员。管理员及项目成员均可添加、删除体验成员。

2 创建项目

2.1 创建项目流程

1、获取小程序id

小程序后台--》管理--》开发管理--》开发设置--》开发者ID

AppID(小程序ID) wxxxxxxxxx

AppSecret(小程序密钥) xxxxxxxxxxxx(不要泄露)

2、下载【微信开发者工具】--需要联网才能使用

3、安装目录D:\Program Files (x86)\Tencent\微信web开发者工具。

2.2 创建项目

1 打开微信开发者工具--》使用微信扫描二维码

2 创建项目

填写名字、路径、APPID

不使用云开发【使用腾讯云的云函数，服务器等等，需要花钱】。

不使用模版。

3 创建完成后，界面如下

4、设置

设置--》编辑器设置--》改变字体大小。

视图--》外观--》移动模拟器位置。

可以勾选掉不显示：模拟器，调试器等。

2.3 本地开发支持http

本地开发，使用Django写后端，

Django运行在0.0.0.0:8000地址，

微信小程序才能通过ip地址访问到我们的Django项目的接口，

微信小程序默认不支持http，但是Django运行在http上，修改一下微信小程序的配置，让小程序支持http请求。

右上角--》详情--》本地设置--》不校验合法域名。

3 项目目录

3.1 项目目录结构

1、项目主配置文件

项目主配置文件必须放到项目的根目录下，控制整个项目

(1)app.js： 小程序入口文件，小程序启动，会执行这个js

(2)app.json：小程序的全局配置文件：顶部的颜色、标题等等

(3)app.wxss：小程序的全局样式

注意：app.js和app.json文件是必须的，不能没有

2、页面文件

小程序有一个个页面，每个页面所需的文件，都存放在pages目录下，一个页面一个文件夹

pages文件夹下，有一个个的文件夹(index,login,register)，每个文件夹下有4个文件。

(1)xx.js： 页面逻辑 js代码存放位置

(2)xx.wxml：页面结构 类html文件存放位置

(3)xx.wxss：页面样式 css存放位置，若全局样式也有，以当前页面为准

(4)xx.json：小页面配置 当前页面顶部颜色，标题

注意：xx.js文件和xx.wxml文件是必须的，不能没有

python 复制代码 
├── components                  【页面中使用的组件】
├── pages   					【页面文件目录】
│   ├── index					【页面】
│   │   ├── index.js				【页面JS】
│   │   ├── index.json				【页面配置】
│   │   ├── index.wxml				【页面HTML】
│   │   └── index.wxss				【页面CSS】
│   └── logs					【页面】
│       ├── logs.js					...
│       ├── logs.json				...
│       ├── logs.wxml				...
│       └── logs.wxss				...
├── utils						【自定义工具】
│	└── utils.js					【功能的定义】
├── app.js						【全局JS】
├── app.json					【全局配置】
├── app.wxss					【全局CSS】
├── project.config.json			【开发者工具默认配置】
├── project.private.config.json	【开发者工具用户配置,在这里修改，优先用这个，可以删除】
├── .eslintrc.js				【ESlint语法检查配置】
├── sitemap.json				【微信收录页面，用于搜索，上线后，搜索关键字就可以搜到我们】

3.2 配置文件

3.2.1 app.json(全局配置)

1、小程序全局配置文件，用于配置小程序的一些全局属性和页面路由，默认标题，顶部颜色，是否有下拉刷新。

2、app.json 配置示例

entryPagePath：小程序默认启动首页

pages：小程序总共有多少个页面

window：全局的默认窗口表现，顶部颜色，是否有下拉，它控制很多东西，这个经常用。

bash 复制代码 
{
  "entryPagePath": "pages/login/login",
  "pages": [
    "pages/index/index",
    "pages/login/login"
    
  ],
    "window": {
      "navigationBarTitleText": "功能演示",   # 标题
      "navigationBarBackgroundColor": "#0000FF", #颜色
      "enablePullDownRefresh": false,  # 是否带下拉刷新
      "backgroundColor": "#00FFFF",    # 下拉刷新颜色
      "backgroundTextStyle": "dark"    # light ，下拉刷新的点点什么颜色
    },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3.2.2 xxx.json(页面配置)

1、小程序页面配置文件，也称局部配置文件，用于配置当前页面的窗口样式、页面标题等。

2、app.json中的部分配置，也支持对单个页面进行配置，可以在页面对应的xxx.json 文件来对本页面的表现进行配置。

3、页面中配置项在当前页面会覆盖app.json中相同的配置项(样式相关的配置项属于app.json中的window属性，但这里不需要额外指定window字段)。

bash 复制代码 
{
  "usingComponents": {},
  "navigationBarTitleText": "登录页面",
  "navigationBarBackgroundColor": "#000080",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "light"
}

定义了当前页面需要使用的自定义组件，usingComponents是一个对象，键(key)是组件的名称，值(value)是组件的路径。

3.2.3 project.config.json(项目配置)

(1)project.config.json

(2)project.private.config.json

小程序项目的配置文件，用于保存项目的一些配置信息和开发者的个人设置。

3.2.4 搜索相关配置

微信现已开放小程序内搜索，开发者可以通过sitemap.json配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。

当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。

当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。

爬虫访问小程序内页面时，会携带特定的user-agent：mpcrawler及场景值：1129。

需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。

以后用户搜索小程序，任意页面有关键字，都会被搜索到。

bash 复制代码 
{
    "desc": "关于本文件的更多信息",
    "rules": [{
    "action": "allow",
    "page": "*"
    }]
}

3.3 WebView渲染模式

webview渲染模式和skyline渲染模式

(1)webview：老一点，稳定，支持低版本和高版本。

(2)skyline：新一点，不太稳定，不支持低版本。

默认使用Skyline渲染模式，支持最新的基础库，不支持低版本客户端。

现在改成webview模式，打开app.json，去掉下面的三个配置项。

python 复制代码 
"renderer": "skyline",
"rendererOptions": {
  "skyline": {
    "defaultDisplayBlock": true,
    "disableABTest": true,
    "sdkVersionBegin": "3.0.0",
    "sdkVersionEnd": "15.255.255"
  }
},
"componentFramework": "glass-easel",

3.4 新建页面

方式一：

1、在pages上，新建文件夹，logs

2、在文件夹上右键，新建页面，写上名字logs，自动创建出四个文件

3、在 app.json中的pages就会多一行

bash 复制代码 
"pages": [
  "pages/index/index",
  "pages/logs/logs"
],

方式二：

新建页面可以直接在app.json中增加一行，pages下会自动创建出一个页面。

bash 复制代码 
"pages": [
  "pages/index/index",
  "pages/logs/logs",
  "pages/login/login"
],

3.4 默认启动页面

修改小程序一启动，就显示的页面。
方式一：修改顺序

bash 复制代码 
# app.json，谁在第一行，一打开小程序就显示那个页面
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/login/login"
  ],

方式二：通过entryPagePath配置

bash 复制代码 
# app.json
"entryPagePath": "pages/index/index",

方式三：临时添加，临时看一下

3.5 调试小程序

3.5.1 调试基础库

微信小程序的基础库，一直在做版本升级

例如：转发功能、发送朋友圈功能

不同的功能是在不同版本中加入的。

假设我们基于老版本的基础库开发的，有的新功能可能没有，

在开发的时候，做功能如果发现写了没效果，确认一下这个基础库是否支持这个功能。

3.5.2 调试窗口

Wxml：页面布局。

Console：调试，我们打印的，小程序自己打印的。

Network：网络请求。

AppData：当前页面定义的变量。

Storage：本地存储。

3.5.3 真机调试

微信扫二维码，这样在微信上就可以看到了。

3.6 纯净项目

删除不需要的，只保留核心，用于从基础开发。

(1)删除components文件夹

(2)删除.eslintrc.js

(3)删除project.config.json

(4)删除project.private.config.json

(5)删除sitemap.json

3.6.1 app.js

bash 复制代码 
// app.js
App({})

3.6.2 app.json

bash 复制代码 
{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "功能演示",   
    "navigationBarBackgroundColor": "#0000FF", 
    "enablePullDownRefresh": true,  
    "backgroundColor": "#00FFFF",    
    "backgroundTextStyle": "dark"
  },
  "style": "v2"
}

(1)导航栏的显示文本：功能演示

(2)导航栏的背景色：蓝色

(3)是否下拉刷新：是

(4)下拉刷新的背景色：浅绿色

(5)下拉刷新里点号的颜色：light或dark

3.6.3 app.wxss(空的)

3.6.4 pages/index/index.js

bash 复制代码 
// index.js
Page({})

3.6.5 pages/index/index.json

bash 复制代码 
{
  "usingComponents": {},
  "navigationBarTitleText": "登录页面",   
  "navigationBarBackgroundColor": "#FF0000", 
  "enablePullDownRefresh": true,  
  "backgroundColor": "#00FFFF",    
  "backgroundTextStyle": "light"
}

页面自己的配置优先使用。

3.6.6 pages/index/index.wxml

bash 复制代码 
<!--index.wxml-->
<view class="container">
  周笔畅
</view>

3.6.7 pages/index/index.wxss(空的)

4 参考附录

参考微信公众平台官网

参考微信开发者工具下载地址

参考小程序全局配置的参考地址

参考小程序页面配置的参考地址

参考小程序项目配置的参考地址

参考小程序搜索相关配置的参考地址

参考小程序调试基础库

相关推荐
jingling5552 小时前
uniapp | 实现微信小程序端的分包处理
微信小程序·小程序·uni-app
最美不过下雨天啊2 小时前
微信小程序发送订阅消息-一次订阅，一直发送消息。
微信小程序·php·一次性订阅·长期订阅
2501_915921433 小时前
iOS App 性能监控与优化实战 如何监控CPU、GPU、内存、帧率、耗电情况并提升用户体验（uni-app iOS开发调试必备指南）
android·ios·小程序·uni-app·iphone·webview·ux
2501_915921434 小时前
前端开发工具有哪些？常用前端开发工具、前端调试工具、前端构建工具与效率提升工具对比与最佳实践
android·前端·ios·小程序·uni-app·iphone·webview
说私域5 小时前
基于开源AI智能名片、链动2+1模式与S2B2C商城小程序的流量运营与个人IP构建研究
人工智能·小程序·流量运营
weixin_177297220696 小时前
剧本杀小程序系统开发：构建线上线下融合的剧本杀生态圈
小程序·剧本杀
2501_9159184111 小时前
HTTPS 端口号详解 443 端口作用、iOS 抓包方法、常见 HTTPS 抓包工具与网络调试实践
android·网络·ios·小程序·https·uni-app·iphone
小蒜学长13 小时前
基于springboot 校园餐厅预约点餐微信小程序的设计与实现（代码+数据库+LW）
数据库·spring boot·微信小程序
热门推荐
01conda中设置镜像地址（附所有可换的地址）02UV安装并设置国内源03A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程04UV 工具安装与国内镜像源配置指南05保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）06GitHub 镜像站点07突破百度网盘的下载限速，两种方法教会你【超详细】08KGG转MP3工具|非KGM文件|解密音频09教你如何认证 Gemini 教育优惠的二次验证，薅个 1年的 Gemini Pro 会员10解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题