微信小程序文档小程序开发指南1-3章

时间  2019-11-19
标签 微信 程序 文档 开发 指南 繁體版
原文   原文链接

目录结构

小程序包含一个描述总体程序的 app 和多个描述各自页面的 page。javascript

描述页面的四个文件必须具备相同的路径与文件名css

网页开发者须要面对的环境是各式各样的浏览器，PC 端须要面对 IE、Chrome、QQ浏览器等，在移动端须要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程当中须要面对的是两大操做系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的，html

 

 

 

JSON 配置

JSON 是一种数据格式，并非编程语言，在小程序中，JSON扮演的静态配置的角色。java

咱们能够看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，咱们依次来讲明一下它们的用途。git

app.json 是当前小程序的全局配置，包括了小程序的全部页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容以下：编程

 

工具配置 project.config.json（个性化配置）

一般你们在使用一个工具的时候，都会针对各自喜爱作一些个性化配置，例如界面颜色、编译配置等等，当你换了另一台电脑从新安装工具的时候，你还要从新配置。json

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

页面配置 page.json

所以咱们提供了 page.json，让开发者能够独立定义每一个页面的一些属性，例如刚刚说的顶部颜色、是否容许下拉刷新等等微信小程序

JSON 语法

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

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

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

  1. 数字，包含浮点数和整数
  2. 字符串，须要包裹在双引号中
  3. Bool值，true 或者 false
  4. 数组，须要包裹在方括号中 []
  5. 对象，须要包裹在大括号中 {}
  6. Null

还须要注意的是 JSON 文件中没法使用注释，试图添加注释将会引起报错

 

要换一个思路了，在框架，其余的开发中，在html中的标签，如今都叫

组件了，要记得转换过来。所谓封装好的组件，在使用的时候就已经有了

一些js，css交互的功能了。而标签更多的还只是语义化

 

标签名字有点不同

每每写 HTML 的时候，常常会用到的标签是 div, p, span，开发者在写一个页面的时候能够根据这些基础的标签组合出不同的组件，例如日历、弹窗等等。换个思路，既然你们都须要这些组件，为何咱们不能把这些经常使用的组件包装起来，大大提升咱们的开发效率。

从上边的例子能够看到，小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力，咱们还提供了地图、视频、音频等等组件能力。

多了一些 wx:if 这样的属性以及  这样的表达式

在网页的通常开发流程中，咱们一般会经过 JS 操做 DOM (对应 HTML 的描述产生的树)，以引发界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，JS 会记录一些状态到 JS 变量里边，同时经过 DOMAPI 操控 DOM 的属性或者行为，进而引发界面一些变化。当项目愈来愈大的时候，你的代码会充斥着很是多的界面交互逻辑和程序的各类状态变量，显然这不是一个很好的开发模式，所以就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来讲就是不要再让 JS 直接操控 DOM，JS 只须要管理状态便可，而后再经过一种模板语法来描述状态和界面结构的关系便可。

小程序的框架也是用到了这个思路，若是你须要把一个 Hello World 的字符串显示在界面上。

WXML 是这么写 :



JS 只须要管理状态便可:<text>{{msg}}</text>


经过 {{ }} 的语法把一个变量绑定到界面上，咱们称为数据绑定。仅仅经过数据绑定还不够完整的描述状态和界面的关系，还须要 /, 等控制能力，
在小程序里边，这些控制能力都用  开头的属性来表达this.setData({ msg: "Hello World" })ifelseforwx:

WXSS 样式

WXSS 具备 CSS 大部分的特性，小程序在 WXSS 也作了一些扩充和修改。

  1. 新增了尺寸单位。在写 CSS 样式时，开发者须要考虑到手机设备的屏幕会有不一样的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者能够免去换算的烦恼，只要交给小程序底层来换算便可，因为换算采用的浮点数运算，因此运算结果会和预期结果有一点点误差。

  2. 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你能够写一个 app.wxss 做为全局样式，会做用于当前小程序的全部页面，局部页面样式 page.wxss 仅对当前页面生效。

  3. 此外 WXSS 仅支持部分 CSS 选择器

JS 逻辑交互

　　咱们改变数据必须用setData吗？ this.setDate({msg:hello world})

　　并且这个setData还必须在函数里面

响应用户的操做就是这么简单，更详细的事件能够参考文档 WXML - 事件 。

此外你还能够在 JS 中调用小程序提供的丰富的 API，利用这些 API 能够很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。在前边的 QuickStart 例子中，在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称，最后经过 setData 把获取到的信息显示到界面上。更多 API 能够参考文档 小程序的API 。

这些得本身看官方文档的API内容

 

程序与页面

微信客户端在打开小程序以前，会把整个小程序的代码包下载到本地。

紧接着经过 app.json 的 pages 字段就能够知道你当前小程序的全部页面路径:

因而微信客户端就把首页的代码装载进来，经过小程序底层的一些机制，就能够渲染出这个首页。

小程序启动以后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

整个小程序只有一个 App 实例，是所有页面共享的，更多的事件回调参考文档 注册程序 App 。

Page({ data: { // 参与页面渲染的数据 logs: [] }, onLoad: function () { // 页面渲染后 执行 } })

Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一块儿渲染出最终的结构，因而就获得了你看到的小程序的样子。

在渲染完界面以后，页面实例就会收到一个 onLoad 的回调，你能够在这个回调处理你的逻辑。

有关于 Page 构造器更多详细的文档参考 注册页面 Page 

 

组件

小程序提供了丰富的基础组件给开发者，开发者能够像搭积木同样，组合各类组件拼合成本身的小程序。




<map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>

API

要获取用户的地理位置时，只须要：



调用微信扫一扫能力，只须要：wx.getLocation({ type: 'wgs84', success: (res) => { var latitude = res.latitude // 纬度 var longitude = res.longitude // 经度 } })


须要注意的是：多数 API 的回调都是异步，你须要处理好代码逻辑的异步问题。

wx.scanCode({ success: (res) => { console.log(res) } })

 

 

2.1.2 JSON 语法

相比于XML ，JSON格式最大的优势是易于人的阅读和编写，一般不须要特殊的工具，就能读懂和修改，是一种轻量级的数据交换格式。

JSON文件都是被包裹在一个大括号中 {}，经过key-value的方式来表达数据。

看起来同 JavaScript 的对象表达方式十分类似，可是有所不一样。

报错信息的箭头附近是有语法错误的

 

2.2 WXML 模板

WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，能够构建出页面的结构。

使用 wx:elif 和 wx:else 来添加一个 else 块：



由于 wx:if 是一个控制属性，须要将它添加到一个标签上。若是要一次性判断多个组件标签，可使用一个  标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view><block/>
<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

2.2.5 列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，便可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名：


就是说指定他们的变量名，不是叫index和item了<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>
相似 block wx:if ，也能够将 wx:for 用在 <block/> 标签上，以渲染一个包含多节点的结构块。例如：
block wx:ifwx:for<block/>


难道不放在block里就不能渲染多个标签了吗<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

2.2.6 模板

WXML提供模板（template），能够在模板中定义代码片断，而后在不一样的地方调用。使用 name 属性，做为模板的名字。而后在 <template/>内定义代码片断，如：

这个东西我之前还百度过

看例子仍是有点看不懂

但好像也少用  知道他是模板就行了

就重复代码段，到时候用到再百度

 

WXML 提供两种文件引用方式import和include。

import 能够在该文件中使用目标文件定义的 template，

须要注意的是 import 有做用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具备递归的特性。

例如：C 引用 B，B 引用A，在C中可使用B定义的 template，在B中可使用A定义的 template ，可是C不能使用A定义的template ，

 

 

 

 

2.3 WXSS 样式

WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。

在小程序开发中，开发者不须要像Web开发那样去优化样式文件的请求数量，只须要考虑代码的组织便可。样式文件最终会被编译优化，具体的编译原理咱们留在后面章节再作介绍。

2.3.6 官方样式库

为了减轻开发者样式开发的工做量，咱们提供了WeUI.wxss基础样式库。

WeUI是一套与微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式原生。

 

2.4 JavaScript 脚本

小程序的主要开发语言是 JavaScript ，开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求。

 

 

 

 

 

 

 小程序中的 JavaScript 是由ECMAScript 以及小程序框架和小程序 API 来实现的。同浏览器中的JavaScript 相比没有 BOM 以及 DOM 对象，因此相似 JQuery、Zepto这种浏览器类库是没法在小程序中运行起来的，一样的缺乏 Native 模块和NPM包管理的机制，小程序中没法加载原生库，也没法直接使用大部分的 NPM 包。

小程序目前能够运行在三大平台：

  1. iOS平台，包括iOS九、iOS十、iOS11
  2. Android平台
  3. 小程序IDE

小程序IDE提供语法转码工具帮助开发者，将 ECMAScript 6代码转为 ECMAScript 5代码，从而在全部的环境都能获得很好的执行

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

 

 

2.4.3 模块化

浏览器中，全部 JavaScript 是在运行在同一个做用域下的，定义的参数或者方法能够被后续加载的脚本访问或者改写。同浏览器不一样，小程序中能够将任何一个JavaScript 文件做为一个模块，经过module.exports 或者 exports 对外暴露接口。（ES6提出的模块化）

请看是一个简单模块示例，B.js 引用模块A，并使用A暴露的multiplyBy2方法完成一个变量乘以 2 的操做。



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

// 在B.js中引用模块A
var multiplyBy2 = require('./moduleA')
var result = multiplyBy2(4)

2.4.4 脚本的执行顺序

浏览器中，脚本严格按照加载的顺序执行

而在小程序中的脚本执行顺序有所不一样。小程序的执行的入口文件是 app.js 。而且会根据其中 require 的模块顺序决定文件的运行顺序，

 

当 app.js 执行结束后，小程序会按照开发者在 app.json 中定义的 pages 的顺序，逐一执行。

 

 

 

 就是说会先执行，App.js中的代码

而后才会执行页面中的js代码

当须要使用全局变量的时，经过使用全局函数 getApp() 获取全局的实例，并设置相关属性值，来达到设置全局变量的目的

 

3.1 渲染层和逻辑层

从这个例子咱们能够看到3个点：
1.渲染层和数据相关。
2.逻辑层负责产生、处理数据。
3.逻辑层经过 Page 实例的 setData 方法传递数据到渲染层。

1. 程序构造器App()

宿主环境提供了 App() 构造器用来注册一个程序App，须要留意的是App() 构造器必须写在项目根目录的app.js里，App实例是单例对象，在其余JS脚本中可使用宿主环境提供的 getApp() 来获取程序实例。

var appInstance = getApp()

其中onLaunch / onShow / onHide 三个回调是App实例的生命周期函数，咱们会在后文展开；onError咱们暂时不在本章展开，

这是应用的生命周期：页面有页面的生命周期
代码清单3-4 App构造器
App({
  onLaunch: function(options) {},
  onShow: function(options) {},
  onHide: function() {},
  onError: function(msg) {},
  globalData: 'I am global data'
})

2. 程序的生命周期和打开场景

初次进入小程序的时候，微信客户端初始化好宿主环境，同时从网络下载或者从本地缓存中拿到小程序的代码包，把它注入到宿主环境，初始化完毕后，微信客户端就会给App实例派发onLaunch事件，App构造器参数所定义的onLaunch方法会被调用。
进入小程序以后，用户能够点击右上角的关闭，或者按手机设备的Home键离开小程序，此时小程序并无被直接销毁，咱们把这种状况称为“小程序进入后台状态”，App构造器参数所定义的onHide方法会被调用。
当再次回到微信或者再次打开小程序时，微信客户端会把“后台”的小程序唤醒，咱们把这种状况称为“小程序进入前台状态”，App构造器参数所定义的onShow方法会被调用。
咱们能够看到，App的生命周期是由微信客户端根据用户操做主动触发的。为了不程序上的混乱，咱们不该该从其余代码里主动调用App实例的生命周期函数。
在微信客户端中打开小程序有不少途径：从群聊会话里打开，从小程序列表中打开，经过微信扫一扫二维码打开，从另一个小程序打开当前小程序等，针对不一样途径的打开方式，小程序有时须要作不一样的业务处理，因此微信客户端会把打开方式带给onLaunch和onShow的调用参数options，示例代码以及详细参数如代码清单3-5和表3-2所示。须要留意小程序的宿主环境在迭代更新过程会增长很多打开场景，所以要获取最新的场景值说明请查看官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/app.html。

 

getApp()获得App.js里面的实例

 

　　经过以上分析能够看出，setTimeout与setInterval的主要区别是:

　　setTimeout()方法只运行一次，也就是说当达到设定的时间后就出发运行指定的代码，运行完后就结束了，若是还想再次执行一样的函数，能够在函数体内再次调用setTimeout()，能够达到循环调用的效果。

　　setInterval()是循环执行的，即每达到指定的时间间隔就执行相应的函数或者表达式，是真正的定时器。

与此同时，咱们要特别留意一点，全部页面的脚本逻辑都跑在同一个JsCore线程，页面使用setTimeout或者setInterval的定时器，而后跳转到其余页面时，这些定时器并无被清除，须要开发者本身在页面离开的时候进行清理。

2. 页面构造器Page()

宿主环境提供了 Page() 构造器用来注册一个小程序页面，Page()在页面脚本page.js中调用，Page() 的调用方式如代码清单3-8所示。Page构造器接受一个Object参数，参数说明如表3-4所示，其中data属性是当前页面WXML模板中能够用来作数据绑定的初始数据，咱们会在后文展开讨论；onLoad / onReady / onShow / onHide /onUnload 5个回调是Page实例的生命周期函数，咱们在后文展开；onPullDownRefresh / onReachBottom / onShareAppMessage / onPageScroll 4个回调是页面的用户行为，咱们也会在后文展开。
代码清单3-8 Page构造器

3. 页面的生命周期和打开参数

页面初次加载的时候，微信客户端就会给Page实例派发onLoad事件，Page构造器参数所定义的onLoad方法会被调用，onLoad在页面没被销毁以前只会触发1次，在onLoad的回调中，能够获取当前页面所调用的打开参数option，关于打开参数咱们放在这一节的最后再展开阐述。
页面显示以后，Page构造器参数所定义的onShow方法会被调用，通常从别的页面返回到当前页面时，当前页的onShow方法都会被调用。
在页面初次渲染完成时，Page构造器参数所定义的onReady方法会被调用，onReady在页面没被销毁前只会触发1次，onReady触发时，表示页面已经准备稳当，在逻辑层就能够和视图层进行交互了。
以上三个事件触发的时机是onLoad早于 onShow，onShow早于onReady。
页面不可见时，Page构造器参数所定义的onHide方法会被调用，这种状况会在使用wx.navigateTo切换到其余页面、底部tab切换时触发。
当前页面使用wx.redirectTo或wx.navigateBack返回到其余页时，当前页面会被微信客户端销毁回收，此时Page构造器参数所定义的onUnload方法会被调用。

 

在列表页打开商品详情页时把商品的id传递过来，详情页经过刚刚说的onLoad回调的参数option就能够拿到商品id，从而绘制出对应的商品，



宿主环境所提供的Page实例的原型中有setData函数，咱们能够在Page实例下的方法调用this.setData把数据传递给渲染层，从而达到更新界面的目的。
因为小程序的渲染层和逻辑层分别在两个线程中运行，因此setData传递数据实际是一个异步的过程，
因此setData的第二个参数是一个callback回调，在此次setData对界面渲染完毕后触发。
setData其通常调用格式是 setData(data, callback)，其中data是由多个key: value构成的Object对象。
代码清单3-11 使用setData更新渲染层数据// pages/list/list.js
// 列表页使用navigateTo跳转到详情页
wx.navigateTo({ url: 'pages/detail/detail?id=1&other=abc' })

// pages/detail/detail.js
Page({
  onLoad: function(option) {
        console.log(option.id)
        console.log(option.other)
  }
})
// 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所示。

3.3 组件

须要注意，全部组件名和属性都是小写，多个单词会以英文横杠 "-" 进行链接。
对于一些容器组件，其内容能够声明在其开始标签和结束标签之间。

这个mode属性只要image组件有吗

mode（中文名模式）

 

咱们介绍一下API通常调用的约定：

  1. wx.on* 开头的 API 是监听某个事件发生的API接口，接受一个 Callback 函数做为参数。当该事件触发时，会调用 Callback 函数。
  2. 如未特殊约定，多数 API 接口为异步接口 ，都接受一个Object做为参数。
  3. API的Object参数通常由success、fail、complete三个回调来接收接口调用结果，示例代码如代码清单3-17所示，详细说明如表3-9所示。
  4. wx.get* 开头的API是获取宿主环境数据的接口。

  5. wx.set* 开头的API是写入数据到宿主环境的接口。

事件是经过bindtap这个属性绑定在组件上的，同时在当前页面的Page构造器中定义对应的事件处理函数tapName，当用户点击该view区域时，达到触发条件生成事件tap，该事件处理函数tapName会被执行，同时还会收到一个事件对象event。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程