小程序开发（王红元）

一、认识小程序

1、什么是小程序？

• 官网解释：微信小程序是一种全新的连接用户和服务的方式，它可以在微信内被便捷的获取和传播，同时具有出色的使用体验
• 理解：小程序是微信生态的一部分，它提供了一种更加方便和高效的用户交互方式

2、小程序的优势

1）用户使用的便捷性

普通app我们的使用过程：下载-打开-注册-使用

小程序：打开（扫码/搜索）- 使用

2）小程序的用户体验，远远高于公众号和h5

3）释放手机内存空间，小程序不需要安装，而且有规定的大小（目前不能超过8M）

4）让手机界面更加简洁

3、小程序开发的必要性

1）由于小程序的各种好处，使用小程序的用户越来越多

2）从公司的角度，有自己的小程序越来越重要

3）为了给用户带来更加便捷的使用体验，需要开发一款对应的小程序

• 开发出来的小程序，用户体验优于h5，并且底层可以调用原生的各种接口
• 可以做到一端开发，多端运行（ios、安卓）

4、Webview的发展和不足

二、小程序的诞生

1、小程序的历史

• 2016年9月21日发布了小程序的内测版本
• 2017年1月9日正式上线

小程序的版本追踪：https://developers.weixin.qq.com/miniprogram/dev/framework/release/

三、开发前准备工作

1、小程序预备知识

2、开发前准备

1）申请AppID

微信公众平台：https://mp.weixin.qq.com

3、小程序开发工具

开发工具选择：官方微信web开发者工具，VSCode

四、小程序的目录结构

五、小程序初体验

1、小程序数据绑定

2、小程序列表渲染

3、小程序事件监听

<view>hello {{name}}view>
<view>我的年龄:{{age}}view>


<view wx:for="{{students}}">{{item.name}}view>


<view>当前计数：{{counter}}view>
<button size="mini" bindtap="handleBtnClick">+button>
1
2
3
4
5
6
7
8
9
10

六、小程序的MVVM架构

• DOM Listeners： ViewModel可以将DOM的监听绑定到Model层
• Data Bindings： ViewModel 可以将数据的变量响应式的反映到View层
• MVVM架构将我们从命令式编程转移到声明式编程

1、配置小程序

小程序的很多开发需求被规定在了配置文件中

为什么要这么做呢？

• 有利于我们的开发效率
• 保证开发出来的小程序的某些风格是比较一致的
• 比如导航栏 - 顶部TabBar，以及页面路由等等

常见的配置文件有哪些？

1）project.config.json：项目配置文件，比如项目名称，appid等

（https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html）

2）sitemap.json : 小程序搜索相关

（https://developers.weixin.qq.com/miniprogram/framework/sitemap.html）

3）app.json：全局配置（重要）

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

window配置

"navigationBarBackgroundColor": "#ff5777",  //配置导航栏背景颜色
"navigationBarTextStyle": "white",   //配置导航栏字体颜色
"navigationBarTitleText": "小晨的商店"  //配置小程序标题
1
2
3

tabBar配置：

"selectedColor": "#ff5777",                      //tabBar字体的背景颜色
"list": [{                                       //tabBar的每个item
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/assets/tabbar/shop.png",    //item图标
      "selectedIconPath": "/assets/tabbar/shop_active.png"   //被选中时的图标
    },{
      "pagePath": "pages/about/about",
      "text": "分类",
      "iconPath": "/assets/tabbar/my.png",
      "selectedIconPath": "/assets/tabbar/my_active.png"
    }]
1
2
3
4
5
6
7
8
9
10
11
12

4）page.json：页面配置
页面配置会覆盖app.json中的全局配置

2、小程序的双线程模型

3、界面渲染过程

1）初始化渲染

• wxml 可以先转成js对象，再渲染出真正的dom树
  

2）数据发生变化

3）界面渲染的整体流程

七、小程序的启动流程

1、注册小程序 - 参数解析

每个小程序都需要在app.js中调用App方法注册小程序

• 在注册时，可以绑定对应的生命周期函数，在生命周期函数中，执行对应的代码
• https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html （App中的生命周期函数）

App({

  //当小程序初始化完成时
  onLaunch: function () {
    console.log("小程序初始化完成了")
    wx.getUserInfo({  //wx开头的都是微信提供给我们的一些系统api
      success: function(res) {
        console.info(res);
      }
    })
  },

  //小程序界面显示出来后
  onShow: function (options) {
    
  },

  //小程序界面被隐藏时
  onHide: function () {
    
  },

  //当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
  onError: function (msg) {
    
  }
})
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

【注意】wx.getUserInfo 将要废弃，通过下面的方式获取用户信息

2、注册APP时做什么事情

1）注册App时，我们一般会做什么？

• 判断小程序的进入场景
• 监听生命周期函数，在生命周期中执行对应的业务逻辑，比如在某个生命周期函数中获取微信用户信息
• 因为App()实例只有一个，并且是全局共享的（单例对象），所以我们将一些共享数据放在这里

2）小程序的后台存活时间

2小时

3）小程序的打开场景

https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html

4）如何确定小程序的打开场景

在APP.js中的onLaunch和onShow声明周期回调函数中会有options参数，其中有scene值（代表着小程序的进入场景）

App({
  onLaunch: function (options) {
     //options中有小程序的打开场景
  },

  onShow: function (options) {
    //options中有小程序的打开场景
    
  },

  onHide: function () {
    
  },

  onError: function (msg) {
    
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3、注册PAGE时做什么？

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

1）在生命周期中发送网络请求，从服务器获取数据

2）初始化一些数据

3）监听wxml中的相关的一些事件

4）其他的一些监听（比如页面的滚动，上拉刷新，下拉加载等）

4、Page实例生命周期

八、小程序组件

1、TEXT组件

https://developers.weixin.qq.com/miniprogram/dev/component/text.html

Text 组件用于显示文本，类似于span标签，是行内元素

<text>hello 小程序text>



<text selectable="{{true}}">小晨要努力变强text>
<text selectable>小晨要努力变强\ntext>


<text>小晨要努 力变强text>
<text space="nbsp">小晨要努 力变强text>
<text space="ensp">小晨要努 力变强text>
<text space="emsp">小晨要努 力变强text>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2、Button组件

https://developers.weixin.qq.com/miniprogram/dev/component/button.html

<button>注册button>




<button size="mini" type="warn">注册button>
1
2
3
4
5
6
7

3、view组件

https://developers.weixin.qq.com/miniprogram/dev/component/view.html

视图组价你：块级元素，独占一行，通常用作容器组件

4、image组件

https://developers.weixin.qq.com/miniprogram/dev/component/image.html

image组件用于显示图片

• image组件可以写成单标签，也可以写成双标签
• image组件有自己默认的大小：320 * 240
• image组件是行内块级元素

5、input组件

comfirm-type: 设置键盘右下角按钮的文字

6、Scroll-view

scroll-view 可以实现具备滚动，常见属性如下：

<scroll-view class="container1" scroll-x>
  <view wx:for="{{10}}" class="item1">{{item}}view>
scroll-view>


<scroll-view class="container1" scroll-y>
  <view wx:for="{{10}}" class="item1">{{item}}view>
scroll-view>



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

7、了解组件的共同属性

所有wxml组件都支持的属性称为共同属性，有如下共同属性