1. 开发前的准备工作
- 微信公众平台 注册账号并登录
- 点击 “立即注册”
- 注册类型:选择小程序
- 填写注册信息、验证邮箱等
- 注册完成后进行登录
- 下载并安装 【微信开发者工具】
- 微信公众平台 ==》 开发 ==》 开发工具
- 下载稳定版并安装
- 安装好的开发者工具,然后扫码进行登录
- 开发者工具介绍
- 登录后的微信开发者工具
- 新建项目
- APPID 获取
- 打开微信公众平台
- 打开微信公众平台
- 小程序项目结构
2. 小程序项目的基本组成结构
2.1 小程序页面的组成
-
pages:所有的 小程序页面, 每个页面以 单独的文件夹存在
-
index:index 页面文件夹,文件夹下面都包含 4 个 基本的页面文件,这四个文件共同组成 index 页面
- index.js:
.js
文件 – 页面的脚本文件,存放页面的数据、事件处理函数、生命周期等 - index.json:
.json
文件 – 当前页面的配置文件,配置页面的外观、表现等 - index.wxml:
.wxml
文件 – 页面的模板结构文件 - index.wxss:
.wxss
文件 – 当前页面的样式表文件
- index.js:
-
-
utils:工具类文件夹
- utils.js
-
app.js:小程序的项目逻辑文件,用来 注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。
-
app.json:小程序公共配置文件,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
-
app.wxss:小程序公共样式表
-
project.config.json:是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置
setting
中保存了编译相关的配置
projectname
中保存的是项目名称
appid
中保存的是小程序的账号 ID
-
sitemap.json:配置小程序及其页面是否允许被微信索引
- rules中保存了索引规则列表的配置
- rules规则中,action表示页面是否能被索引(allow,disallow),page表示生效的页面
2.2 .wxml 文件
-
什么是 wxml
- wxml (WeiXin Market Language)是框架设计的一套标签语言(组件),用于构建小程序页面的结构,类似于HTML
-
WXML
和HTML
的区别-
标签名称不同
- HTML(div, span, img, a)
- WXML(view, text, image, navigator)
-
属性节点不同
- 超链接
- 跳转到home页
-
提供了动态渲染数据的模板语法
- 数据绑定
- 条件渲染
- 列表渲染
-
-
wxml 中是否可以写入 div标签
- 可以使用,但不推荐
- 在wxml中所有不被识别的标签都会被解析为 类view 标签的
2.3 .wxss 文件
- 什么是 wxss
- wxss(WeiXin Style Sheets)是一套类似于 css 的样式语言
- wxss 具有 css 的大部分特性
- wxss 新增了一个尺寸单位
rpx
,一个 rpx 为页面宽度的 1/750 - 分类
全局样式
:根目录下 wxss 中的样式局部样式
: 页面目录下 wxss 中的样式- 局部样式优先级高于优先级,当二者发生冲突时,局部样式会覆盖全局样式
- 选择器
- wxss 仅支持部分css选择器:类(class)选择器和id选择器、元素选择器、并集选择器、后代选择器、伪类和伪元素
- 一般推荐使用 class 选择器
2.4 .json 文件
-
根目录下 app.json 文件
- 修改项目基本配置的文件
-
页面中的 .json 文件
- 修改当前页面的配置
页面中 json 文件的优先级高于根目录下 json 优先级
3. 小程序宿主环境
-
宿主环境:程序运行所必须依赖的环境
- web 前端的宿主环境为:浏览器
android
软件的宿主环境为:android
系统IOS
软件的宿主环境为:IOS
系统小程序
的宿主环境:手机微信
-
小程序的宿主环境是
手机微信
- 所以小程序可以调用手机微信的:
- 扫码
- 支付
- 登录
- 分享
- 等功能
- 所以小程序可以调用手机微信的:
-
小程序的运行环境
-
渲染层
- wxml、wxss运行的地方
- 渲染层的界面使用了
WebView
进行渲染 - 多个界面就会有多个 webview
-
逻辑层
- js运行在逻辑层
- 逻辑层采用
JsCore
线程运行JS脚本
-
渲染层和逻辑层之间的通信,会经过微信客户端的中转
- 逻辑层发送网络请求也经由
Native(手机原生系统)
转发
- 逻辑层发送网络请求也经由
4. 小程序内置组件
小程序组件官方文档
- 常用到的组件
- view:视图容器,类似于div标签
- scroll-view:可以滚动的视图区域,相当于添加了 overflow:scroll 的div
- swiper:滑块视图容器,需要搭配 swiper-item 使用
- text:文本,相当于 span 标签
- rich-text:富文本
- button:按钮
- image:图片,相当于 img
5. 小程序成员管理
-
在 小程序开放平台 中,可以对小程序进行成员的管理
-
成员角色
- 管理员:账号注册绑定的微信,小程序项目负责人
- 项目成员:小程序开发成员
- 体验人员:测试人员
6. 小程序发布流程
- 版本分类
- 本地 - 开发版本
- 上传 - 开发版本 / 体验版本
- 上传 - 审核版本
- 上传 - 线上版本
- 微信开发者工具
- 右上角 “上传” 按钮进行上传
- 填写版本号和项目备注
- 上传成功
- 在小程序公众平台 进行版本管理
- 刚刚上传的版本在开发版本可以找到
- 将上传的版本设置为 体验版
- 体验版本没有问题,可以“提交审核”,得到审核版本
- 提交审核之前要确保 小程序信息 是完整的
- 审核成功后就会自动上传成为线上版本