关于小程序:小程序

小程序

简介

何为小程序

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>

//JS
Page({
    data: {time: (new.Date()).toString()},
    })

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

//WXML 模板
<view height="{{height}}">{{time}}</view>

//JS
Page({
    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:foo
1: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.js
App({globalData: 1})

模块化

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

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

// moduleA.js
module.exports = function(value){return value * 2;}

// B.js

// 在 B.js 中援用模块 A
var 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 /onError
3. 这个 App 是单例的。4. 结构器 App()必须放在根目录的 app.js 外面。5. 在其余 js 脚本能够通过 getApp()来获取程序实例。

//app.js
App({onLaunch: function(options) {},
  onShow: function(options) {},
  onHide: function() {},
  onError: function(msg) {},
  globalData: 'I am global data'
})

// other.js
var 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.js
Page({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. 页面跳转和路由