微信小程序开发实战-第一周

微信小程序实战

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 小程序文件类型

小程序代码构成

1. .json 后缀的 JSON 配置文件
2. .wxml 后缀的 WXML 模板文件
3. .wxss 后缀的 WXSS 样式文件
4. .js 后缀的 JS 脚本逻辑文件

• 样式 wxss css
• 骨架 wxml html
• 业务 js js
• 配置 json

app.json小程序全局配置：包括小程序所有页面的路径、界面表现、网络超时时间、底部 tab 等

project.config.json工具配置：开发工具个性化配置

page.json页面配置：独立定义每个页面的一些属性

JSON语法

JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。

1. 数字，包含浮点数和整数
2. 字符串，需要包裹在双引号中
3. Bool值，true 或者 false
4. 数组，需要包裹在方括号中 []
5. 对象，需要包裹在大括号中 {}
6. 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:视频