小程序的开发之路②

微信小程序开发框架

创建项目后系统自带创建简介
现场逐一讲解项目目录

结合 HTML，CSS，javascript 讲解
项目的保存和删除，移植

app.json 配置

pages 字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

1. 配置文件代码编写

app.json 配置

“window”: 窗体和背景的高置

window 字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我的微信",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true,
    "backgroundColor": "#ddd"
  }
1
2
3
4
5
6
7
8

导航条背景颜色：“navigationBarBackgroundColor”: “#000”,

导航条文字：“navigationBarTitleText”: “我的微信”,

导航条文字颜色：“navigationBarTextStyle”:“white”

下拉刷新：“enablePullDownRefresh”: true,

下拉刷新背景颜色：“backgroundColor”: “#ddd”

下拉刷新三个小点的动画效果：“backgroundTextStyle”:“dark”,(loadimg)

Pages：所有页面所存在的位置，让系统知道页面有多少路径

“sitemapLocation”: 站内地图、站内导航、站内搜索 (是否允许站内搜索)

“sitemapLocation”: “sitemap.json”

文档介绍网址：https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html

sitemap:

小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。

Json 的最后一行不能加豆号，加了会报错且不会编译

不记得单词

2. 底部触摸栏代码编写

制作页面底部的触摸栏
注意：图标的运用

"tabBar"最少 2 项，最多 5 项
app.json

PagePath:配置的页面路径

text:文本

iconPath:默认图标

selectIconPath:选中图标

“selectedColor”: “#f00”：选中字体的颜色

“borderStyle”:底部导航的分隔线颜色

工具配置 project.config.json

小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

JSON 语法

这里说一下小程序里 JSON 配置的一些注意事项。

JSON 文件都是被包裹在一个大括号中 {}，通过 key-value 的方式来表达数据。JSON 的 Key 必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。

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

数字，包含浮点数和整数
字符串，需要包裹在双引号中
Bool 值，true 或者 false
数组，需要包裹在方括号中 []
对象，需要包裹在大括号中 {}
Null

还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。

3、微信新页面的创建方式有 3 种

1.从 app.json 文件开始创建

2.单个文件逐一创建

3.删除文件后的编译自动创建

在 page 左键新建目录（如新建 about,在 about 文件左键->左键:新建 page->出现四个页面(about.js、about.json、about.wxnl、about.wxss

如何看见要编辑的代码页面：

在 app.json 页面中的 page 路径放到第一
添加编译模式—》设置相关名称和路径。

4、新页面创建的层次关系

1.所有页面都在 pages 文件中，也可以自行定位于自定义的其他文件，比如 page

2.在一个文件夹中创建一个页面（创建简单，代码清晰）

3.在一个文件夹中创建多个页面（层次清晰）

对应关系

WXML -> HTML

WXSS -> CSS

JS -> Javascript

JSON -> Javascript（json 对象）

App -> application

编码要求

不能直接使用 HTML 文件

可以全部使用 CSS 文件

Js 脚本文件没有 Window 对象

在微信小程中没有 window 对象，不能使用 dom 结构

app 是全局应用

标签

对应关系

view -> div
text -> font + span

navigator -> a (跳转从根目录出发)

组件

你只需要在 WXML 写上对应的组件标签名字就可以把该组件显示在界面上，例如，你需要在界面上显示地图，你只需要这样写即可：

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

5、注册小程序

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取 App 上的数据或调用开发者注册在 App 上的函数。

// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data
1
2
3

6、微信小程序的生命周期

微信小程序每个页面存在生命周期

onLaunch -> 小程序展开的时候
整个小程序的东西

onload -> 生命周期函数 - 监听页面加载

onReady -> 生命周期函数 - 监听页面初次渲染
第一次某个页面时操作

onShow -> 生命周期函数 - 监听页面显示

每次后台到前的台的显示

onHide -> 生命周期函数 - 监听页面隐藏

onUnload -> 生命周期函数 – 监听页面卸载

onPullDownRefresh -> 页面监听相关处理函数 – 监听用户下拉动作

onReachBottom -> 页面上拉触底事件的处理函数

onShareAppMessage -> 用户点击右上角分享

用户没有发送之前触发

任何小程序都是一个 app 对象，所以入是 app.js

onLaunch 创小程序最始初始化的一个方法

每一个页面启动时会启动 onLoadonReady

7、注册页面

对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。

**使用 Page 构造器注册页面 **
简单的页面可以使用 Page() 进行构造。

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

用户没有发送之前触发

任何小程序都是一个 app 对象，所以入是 app.js

onLaunch 创小程序最始初始化的一个方法

每一个页面启动时会启动 onLoadonReady

在页面中使用 behaviors

页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。

// my-behavior.js
module.exports = Behavior({
  data: {
    sharedText: 'This is a piece of data shared between pages.'
  },
  methods: {
    sharedMethod: function() {
      this.data.sharedText === 'This is a piece of data shared between pages.'
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12

// page-a.js
var myBehavior = require('./my-behavior.js')
Page({
  behaviors: [myBehavior],
  onLoad: function() {
    this.data.sharedText === 'This is a piece of data shared between pages.'
  }
})
1
2
3
4
5
6
7
8

逻辑代码调式方法

控制台显示方式 console.log() console.info()

弹出框(API 框架时介绍)

wx.showToast({
    title: 'this is about page',
})
1
2
3

模拟，真机调式模式
点击编译，预览，真机调试

逻辑代码调式方法
控制台显示方式 console.log() console.info()
弹出框(API 框架时介绍)

8、微信小程序的发布步骤

微信小程序开发完成后的测试及发布上传操作：

测试号： 不能进行上传

APPID：可以上传—>上传微信公众平台( 订阅号，服务号)：小程序管理功)能(关联)

9、功能简介

编译：对已有代码做保存、更新

预览：系统生成二维码，用手机微信扫码后可以在移动端看见

真机调试：同样生成二维码，在手机端可以查看运行，同时在 PC 端有调试结果
切后台：

清缓存：清除各种在运行期间所遗留下的缓存文件

版本管理：借助于 git，完成对当前微信小程序版本的控制，可以做任何版本控制。如推送，抓取等，同时也可以建立分支和合并分支

社区：互联网跳转链接，跳转到微信小程序论坛

在开发工具的帮助菜单里

测试号：互联网跳转链接，跳转微信开放文档-测试号申请页面

上传（APPID 才有）：提供上传代码至微信开放平台

10、微信小程序的发布步骤

1、点击“上传” 按钮，上传微信公众平台(小程序和小游戏的操作)

注意：只有在有正式 APPID 的情况下才有此按钮，测试环境是没有的

2、微信开放平台：原生的安卓和 ios 开发的接口操作，作为第三方移动程序提供接口，使用户可将第三方程序的内容发布给好友或分享至朋友圈，第三方内容借助微信平台获得更广泛的传播。从而形成了一种主流的线上线下微信互动营销方式。

3.打开微信公众平台

点击“提交审核”

4.三种状态

开发版本
审核版本
线上版本

同时也对应三种权限

> 公众平台服务号、订阅号、企业微信以及小程序的相关说明
1

1. 订阅号：主要偏于为用户传达资讯（类似报纸杂志），认证前后都是每天只可以群发一条消息；

2.服务号：主要偏于服务交互（类似银行，114，提供服务查询），认证前后都是每个月可群发 4 条消息；

3.企业微信：是一个面向企业级市场的产品，是一个独立的 APP 好用的基础办公沟通工具，拥有最基础和最实用的功能服务，专门提供给企业使用的 IM 产品。（适用于企业、政府、事业单位或其他组织）；

4.小程序：是一种新的开放能力，开发者可以快速的开发一个小程序。小程序可以在微信内被便捷的获取和传播，同时拥有出色的使用体验。

图例说明：