关于小程序:小程序

小程序

简介

何为小程序

1. 在用户的角度上，就是便捷的跟用户连贯的形式。
2. 在技术的角度上，就是在微信伟人的肩膀上疾速便捷的开发程序。

小程序的组成

1. JSON配置
2. WXML模板
3. WXSS款式
4. JS脚本

JSON配置（以.json结尾的文件）

1. 作用

JSON其实咱们都很理解，就是一种数据格式。那么它在小程序充当的角色就是配置的作用。比方app.json，能够进行页面注册的配置。

2. 语法

跟JS对象表达式很相像，然而有一些差异

1. key值必须用双引号包裹起来，并且不能用单引号
2. 数字，包含浮点数和整数
3. 字符串，须要包裹在双引号中
4. bool值，true或者false
5. 数组，须要包裹在方括号中
6. 对象，须要包裹在大括号中
7. NULL
8. 其余格局都会报undefined
9. 不能增加正文

WXML模板（以.wxml结尾的文件）

WXML能够类比HTML，语法上很多类似的中央。

1. 语法

1. 正文

   <!-- 正文 --> 

2. 根本语法

   <标签名 属性名1="属性值1" 属性名2="属性值2" ...> ...</标签名>

1. 严格闭合

2. 大小写敏感

2.数据绑定

web开发是应用JS通过DOM接口进行动静的渲染页面，小程序应用数据绑定进行动静渲染。

1.根本语法：

通过{{变量名}}的模式进行动静的绑定

//WXML模板<view>{{time}}</view>//JSPage({    data: {        time: (new.Date()).toString()    },    })

2. 属性也能够进行动静绑定，然而须要包含在双引号内

//WXML模板<view height="{{height}}">{{time}}</view>//JSPage({    data: {        height: 1    },    })

3. 除了动静绑定，也能够在该语法下绑定常量

//WXML模板<view >{{1，2，3}}</view>

1. 变量名对大小写敏感

2. 没有定义的变量或者设置为undefined的变量不会同步到WXML模板。

3.逻辑语法

1. 三元运算

//WXML模板<view >{{a === 10 ? "a等于10的要执行的语句" : "a不等于10的要执行的语句"}}</view>

2. 字符串拼接

{{    name: world    }}//WXML模板<view >{{"hello" + name}}</view>输入hello world

3. 算术运算

{    a:10,    b:2,    c:5,    d:2}<view >{{a + b}} + {{c}} + d</view>输入:12 + 5 + d

4. 条件逻辑

if else，例子如下：

<view wx:if="{{length > 5}}" >6</view><view wx:elif="{{length < 2}}" >1</view><view wx:else>3</view>

如果须要对多个标签进行判断，则应用<block></block>

<block wx:if="{{true}}"><view>1</view><view>2</view></block>

4.列表渲染

1. 默认

for循环，默认下标的变量名是index，默认以后项变量名为item，下标是从1开始

<view wx:for="{{array}}">{{index}}: {{item.messge}}</view>Page({  data: {    array: [{      message: 'foo',    }, {      message: 'bar'    }]  }})输入：0:foo1:bar

2.自定义

能够自定义下标和以后项的变量名

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">  {{idx}}: {{itemName.message}}</view>

3.块

<block wx:for="{{[1, 2, 3]}}">  <view> {{index}}: </view>  <view> {{item}} </view></block>

WXSS款式

1. 文件组成

1. app.wxss是我的项目公共款式
2. 页面款式是跟WXML模板同级的WXSS款式

2. 尺寸单位

咱们以前形容图片个别都是应用像素px。然而当初很多类型的手机的屏幕有很多种，所以小程序应用rpx绝对的单位来进行形容。

小程序进行编译之后，会对xpr进行换算，这样就可能绝对屏幕，不会太多空白。以375物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。举个例子：iPhone6屏幕宽度为375px，共750个物理像素，那么1rpx = 375 / 750 px = 0.5px。

款式应用形式

1. 援用款式

   @import './test_0.wxss'

2. 内联款式

   <view style="color: red; font-size: 48rpx"></view>

选择器

权重

view{ // 权重为 1  color: blue}.ele{ // 权重为 10  color: red}#ele{ // 权重为 100  color: pink}view#ele{ // 权重为 1 + 100 = 101，优先级最高，元素色彩为orange  color: orange}view.ele{ // 权重为 1 + 10 = 11  color: green}

官网款式库

https://github.com/Tencent/we...

JS脚本

ECMAScript

小程序的JS是由ECMAScript和小程序框架和小程序API来实现.

小程序执行环境

不同手机的平台不同，ECMAScript规范不同，小程序开发工具做了一个性能能够不便去管制，不须要程序员做思考。

开发者须要在我的项目设置中，勾选 ES6 转 ES5 开启此性能。

作用域

文件申明的变量和办法只在该文件下有用

当须要应用全局变量的时候getApp()获取全局实例，

// a.js// 获取全局变量var global = getApp()global.globalValue = 'globalValue'// b.js// 拜访全局变量var global = getApp()console.log(global.globalValue) // 输入 globalValue

如果要将这个全局变量全副能够应用在App()中进行设置

// app.jsApp({  globalData: 1})

模块化

web开发的变量是能够被后续加载的脚本拜访或者改写的，然而咱们明确了上一节的作用域之后，在小程序是做不到这样的，那么如果咱们须要用其余文件的办法怎么应用？

小程序将每一个JS文件作为一个模块，通过module.exports 或者 exports 对外裸露接口。

// moduleA.jsmodule.exports = function( value ){  return value * 2;}// B.js// 在B.js中援用模块Avar multiplyBy2 = require('./moduleA')var result = multiplyBy2(4)

脚本的执行程序

1. 依照加载的模块的程序
2. 小程序会依照开发者在 app.json 中定义的 pages 的程序，逐个执行。

小程序宿主环境

上一节咱们明确了小程序是由JSON，WXML,WXSS,JS等文件组成，那么这些文件是怎么进行交互的，怎么协同工作的？咱们当初就须要去理解小程序的宿主环境。宿主环境会提供给咱们微信客户端的能力。

宿主环境

分类

宿主环境分为逻辑层和渲染层

1. 逻辑层。JS文件运行在逻辑层。
2. 渲染层。WXML模板和WXSS款式运行渲染层。

如何渲染

1. 渲染层应用{{}}语法绑定变量
2. 逻辑层负责产生，解决数据。
3. 逻辑层通过Page实例的setData办法传递数据给渲染层。

通信模型

渲染层和逻辑层别离由两个线程治理。渲染层应用WebView进行渲染，逻辑层应用 JsCode线程进行渲染。一个程序有多个页面，所以会有多个线程，WebView和JsCode线程最终通过微信客户端进行直达。

数据驱动

咱们一开始理解的如何渲染只是一个初步理解，那么外面到底是怎么运作的呢？咱们晓得数据和试图应该联动变动。所以小程序就有一种办法，能够实现数据变动试图也随之变动的技术，叫数据驱动。

WXML模板能够等价于一个DOM树，通过JS也能够示意DOM树。例子如下：

//WXML模板<view>    <view>a</view>    <view>b</view>    <view>c</view></view>//JS{    name: "view",    children:[    {name:"view", children:[{text:"a"}]},    {name:"view", children:[{text:"b"}]},    {name:"view", children:[{text:"c"}]},    ]}

数据驱动就是先将WXML模板转换为JS对象，而后应用Page的setData办法，给对象赋值，而后将JS对象渲染为WXML模板。过程如下：

//WXML模板<view>{{msg}}</view>//JS对象Page({    data: {        msg: "hello world!"    }})

转换WXML模板为上面的JS对象

{    name:"view",    children: [{text: msg}]}

应用Page实例的setData办法将msg替换为JS对象的值。

{    name:"view",    children: [{text: "hello world"}]}

最终将JS对象转换为WXML模板

<view>hello world</view>

程序与页面

程序

1. 程序结构器

1. 宿主环境提供一个App()结构器来注册一个App.2. 结构器承受一个Object参数，参数阐明如表1.1，其中结构器的回调函数：onLaunch / onShow / onHide /onError3. 这个App是单例的。4. 结构器App()必须放在根目录的app.js外面。5. 在其余js脚本能够通过getApp()来获取程序实例。

//app.jsApp({  onLaunch: function(options) {},  onShow: function(options) {},  onHide: function() {},  onError: function(msg) {},  globalData: 'I am global data'})// other.jsvar appInstance = getApp()

表1.1

2. 程序的生命周期和关上场景

生命周期

1. 首次进入小程序，微信客户端初始化好宿主环境，同时从网络下载或者从本地缓存拿到小程序的代码包，把它注入到宿主环境，初始化结束，微信客户端就会给App实例派发onLauch事件，App结构器参数定义的onLaunch办法会被调用
2. 进入小程序之后，用户能够点击右上角的敞开，或者按手机设施的Home键来到小程序，此时小程序并没有被间接销毁，咱们把这种状况称为“小程序进入后盾状态”，App结构器参数所定义的onHide办法会被调用。
3. 当再次回到微信或者再次关上小程序时，微信客户端会把“后盾”的小程序唤醒，咱们把这种状况称为“小程序进入前台状态”，App结构器参数所定义的onShow办法会被调用。

特点：这些回调函数都是微信客户端依据用户操作被动触发的，为了防止程序上的凌乱，咱们不应该从其余代码被动调用App实例的生命周期函数。

关上场景

从群聊会话里关上，从小程序列表中关上，通过微信扫一扫二维码关上，从另外一个小程序关上以后小程序等

针对不同路径的打开方式，小程序有时须要做不同的业务解决，所以微信客户端会把打开方式带给onLaunch和onShow的调用参数options

referrerInfo Object 当场景为由从另一个小程序或公众号或App关上时，返回此字段
referrerInfo.appId String 起源小程序或公众号或App的 appId，详见下方阐明
referrerInfo.extraData Object 起源小程序传过来的数据，scene=1037或1038时反对

页面

1.文件形成和门路

1. 页面，逻辑，配置。页面由WXML模板和WXSS款式形容，逻辑由JS文件形容，配置由JSON文件形容。
2. 一个页面的文件须要搁置在同一个目录下，其中WXML文件和JS文件是必须存在的，JSON和WXSS文件是可选的。
3. 页面门路须要在小程序代码根目录app.json中的pages字段申明，否则这个页面不会被注册到宿主环境中。例如两个页面的文件的相对路径别离为 pages/index/page. 和 pages/other/other.

2.页面结构器Page()

1. 宿主环境提供了 Page() 结构器用来注册一个小程序页面
2. Page()在页面脚本page.js中调用
3. Page结构器承受一个Object参数，大抵参数如下；

3. 页面的生命周期和关上参数

1. 页面首次加载的时候，微信客户端就会给Page实例派发onLoad事件，Page结构器参数所定义的onLoad办法会被调用，onLoad在页面没被销毁之前只会触发1次
2. 页面显示之后，Page结构器参数所定义的onShow办法会被调用，个别从别的页面返回到以后页面时，当前页的onShow办法都会被调用。
3. 在页面首次渲染实现时，Page结构器参数所定义的onReady办法会被调用，onReady在页面没被销毁前只会触发1次，onReady触发时，示意页面曾经筹备得当，在逻辑层就能够和视图层进行交互了。以上三个事件触发的机会是onLoad早于 onShow，onShow早于onReady。
4. 页面不可见时，Page结构器参数所定义的onHide办法会被调用，这种状况会在应用wx.navigateTo切换到其余页面、底部tab切换时触发。
5. 以后页面应用wx.redirectTo或wx.navigateBack返回到其余页时，以后页面会被微信客户端销毁回收，此时Page结构器参数所定义的onUnload办法会被调用。

4.页面数据

上一节咱们晓得Page结构器有一个data参数，这个参数用来初始化页面须要的数据，那么咱们怎么动静的扭转数据呢？应用this.setData的办法进行动静的扭转数据。

// page.jsPage({  onLoad: function(){    this.setData({      text: 'change data'    }, function(){      // 在这次setData对界面渲染结束后触发    })  }})

此外须要留神以下3点：

1. 间接批改 Page实例的this.data 而不调用 this.setData 是无奈扭转页面的状态的，还会造成数据不统一。

2. 因为setData是须要两个线程的一些通信耗费，为了进步性能，每次设置的数据不应超过1024kB。
3. 不要把data中的任意一项的value设为undefined，否则可能会有引起一些不可意料的bug。

5.页面的用户行为

小程序宿主环境提供了四个和页面相干的用户行为回调：

1.下拉刷新 onPullDownRefresh

监听用户下拉刷新事件，须要在app.json的window选项中或页面配置page.json中设置enablePullDownRefresh为true。当解决完数据刷新后，wx.stopPullDownRefresh能够进行以后页面的下拉刷新。

2.上拉触底 onReachBottom

监听用户上拉触底事件。能够在app.json的window选项中或页面配置page.json中设置触发间隔onReachBottomDistance。在触发间隔内滑动期间，本事件只会被触发一次。

3.页面滚动 onPageScroll

监听用户滑动页面事件，参数为 Object，蕴含 scrollTop 字段，示意页面在垂直方向已滚动的间隔（单位px）。

4.用户转发 onShareAppMessage

只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮，在用户点击转发按钮的时候会调用，此事件须要return一个Object，蕴含title和path两个字段，用于自定义转发内容，如代码清单3-13所示。

6.页面跳转和路由