微信小程序实战
1.开发准备
1.1 特性
-
全新的小程序开发模式-组件式开发
-
组件不仅有复用功能，还有很强的代码分离性
-
flex布局与ES6
-
良好的小程序开发结
-
了解项目需求
1.2 小程序开发准备工作
- 注册微信小程序账号
https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN
- 微信公众平台登录
https://mp.weixin.qq.com/
- 登录之后来到小程序后台管理页面
- 注册得到的小程序ID AppID
下载微信开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
根据系统版本下载相应版本
1.3新建小程序项目
新建小程序项目
扫码登陆开发者工具
新建小程序项目
新建小程序应进行以下的设置
- 项目名称
- 项目文件目录
- AppID 使用我们注册的AppID或者测试号
- 开发模式 小程序
- 后端服务 云开发或不使用云服务
全部设置完成后，点击新建
新建完成后，便能看到微信官方默认的小程序示例
微信开发工具简单介绍
模拟器：预览小程序的运行效果，可以设置机型、缩大小、网络状态、模拟操作、静音
编辑器：编写小程序代码的区域，也可以使用第三方IDE进行开发
调试器：调试器功能和浏览器调试器功能一致，代码输出输入，debug
资源管理器：显示当前项目目录结构，新建目录等操作
常用快捷键
在编辑器中按下F1，可显示所有快捷键
快速打开文件：ctrl+P
打开最近打开的文件：ctrl+E
格式化代码：shift+alt+f
1.4 小程序文件类型
小程序代码构成
.json后缀的JSON配置文件.wxml后缀的WXML模板文件.wxss后缀的WXSS样式文件.js后缀的JS脚本逻辑文件
- 样式 wxss css
- 骨架 wxml html
- 业务 js js
- 配置 json
app.json小程序全局配置：包括小程序所有页面的路径、界面表现、网络超时时间、底部 tab 等
project.config.json工具配置：开发工具个性化配置
page.json页面配置：独立定义每个页面的一些属性
JSON语法
JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。
- 数字，包含浮点数和整数
- 字符串，需要包裹在双引号中
- Bool值，true 或者 false
- 数组，需要包裹在方括号中 []
- 对象，需要包裹在大括号中 {}
- Null
还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错
1.5 小程序的组织结构
可以保留官方示例文件，也可以删除，全部重新建立
2.开始项目
2.1 新建空白项目
新建完小程序项目后，删除官方示例的文件，全部采用自主新建文件方式
仅保留project.config.json
相当于新建一个空白的小程序项目
-
新建
app.js和app.json文件 -
app.js和app.json文件不能为空，初始化填入App()和{} -
新建一个目录-新建页面
开发工具会自动生成项目文件，并将页面路径自动注册到
app.json中
2.2 小程序配置
配置导航栏
官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
配置可参考官方文档来设置
小程序全局配置https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
window
navigationBarBackgroundColor：导航栏背景颜色
navigationBarTitleText:导航栏标题文字内容
navigationBarTextStyle：导航栏标题颜色，仅支持 black / white
navigationStyle：导航栏样式，仅支持以下值：default 默认样式custom 自定义导航栏，只保留右上角胶囊按钮。
设置浸入式效果
custom自定义导航栏
配置background窗口
backgroundColor：窗口背景颜色
背景颜色建议与页面背景颜色一致
enablePullDownRefresh:开启全局下拉刷新，默认为false
红色区域为窗口背景颜色
微信官方示例
2.3wxml与组件
wxml-骨架文件
官方组件文档https://developers.weixin.qq.com/miniprogram/dev/component/
- 微信官方组件
- 自定义组件
常用组件
view：视图容器
text:文本
image:图片
video:视频
来源：CSDN
作者：BY彡阿长
链接：https://blog.csdn.net/S1259364843/article/details/104884838