小程序开发（一）| 简介
1. 发展
每一款手机app的开发都有webview的部分，所以微信小程序也就是微信中的webview
代码构成所发展出来的产物。微信中的webview逐渐成为移动web的重要入口，对提升用户体验有着很大的帮助，因此微信对其加工，提供了一系列JS API。
一开始，这些API只在微信内部被使用，直到2015年初，微信发布了一套网页开发工具包，称之为JS-SDK，开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API，让开发者也能够使用到微信的能力。
2016年9月，小程序开始内测，由腾讯云为小程序提供云端服务器及相关技术服务。
内测中的小程序其实也出现过一些问题，在JS-SDK下，开发者的体验并不算太好。所以微信需要设计一个全新的系统，它需要使得所有的开发者都能做到：
- 快速的加载
- 更强大的能力
- 原生的体验
- 易用且安全的微信数据开放
- 高效和简单的开发
2017年初，第一批小程序上线运行。这几年来，小程序在网络、安全、数据等方面也不断完善，为微信用户和开发者提供着便捷服务和优质体验。
2.代码构成
小程序的主要开发语言是JavaScript，除此之外还有另外三种文件：WXSS、WXML、JSON。每个页面都由这四种类型的文件构成，他们的作用分别是：
JSON配置：JSON是一种数据格式，并不是编程语言。在小程序中，JSON扮演着静态资源配置的角色。
举个例子：
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
{
"pages":[
"pages/index/index",
"pages/myHome/index",
"pages/testpage/index",
],
"tabBar":{
"color": "black",
"backgroundColor":"#fff",
"selectedColor": "#2782d2",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath":"images/indexicon.png",
"selectedIconPath":"images/indexicon_selected.png"
},
{
"pagePath": "pages/teame/teame",
"text": "组队",
"iconPath":"images/teameicon.png",
"selectedIconPath":"images/teameicon_selected.png"
}]
},
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#AFE1FF",
"navigationBarTitleText": "我的小程序",
"navigationBarTextStyle":"black"
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
WXML模板：WXML和网页开发中的HTML十分相似，也有标签、属性组成，起到描述页面结构的作用。但WXML和HTML也有不同之处：
- 标签不同，HTML的比较常用的有div, p, span，在WXML中的标签为view, button, text。WXML中有更多小程序自带的组件，比如map、swiper等等。这是因为HTML直接由浏览器渲染出来，而小程序是处于移动app中的webview中，相比于传统的HTML开发，会有一定的局限性，但在小程序框架中，我们有更多微信已经封装好的功能。
- MVVM的开发模式，小程序的开发框架类似React和Vue。WXML可以直接使用wx:if 这样的属性以及 {{ }} 这样的表达式，相关的变量由js来管理状态。
举个例子：
WXML: <text wx:if=”{{condtion}}”>{{msg}}</text>
JS: this.setData({ msg: "Hello World" })
- 使用Moustache模板语法，可以将双花括号内的变量替换为对应的data变量，这里是msg，这种语法在php、python等语言中也会使用。
- 使用wx:if控制此处
标签是否存在，当我们设置
this.setData({condition:false})时，页面上的msg就不存在了
WXSS样式：WXSS延续了网页开发中CSS的大部分属性，也对css进行了扩写。
新增尺寸单位rpx，由于小程序一般只会在手机上打开，对不同的手机型号，我们需要用rpx来进行自动适配。rpx是以iphone6的尺寸为标准的，rpx和px的换算是：1 rpx = 0.5 px = 1 物理像素
也就是说，当我们需要绘制一个长100px，高20px的盒子，换算成rpx，width=200rpx，height=40rpx。
JS 逻辑交互：小程序还需要能够与用户进行交互，响应用户点击、获取用户位置等操作。
Click：
<view>{{ msg }}</view><button bindtap="clickMe">点击我</button>
Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}})
这里的bindtap就是获取用户点击状态的，当我们点击这里的按钮时，触发clickMe方法。
- 其它的API有wx.onCompassChange(监听罗盘数据变化)、wx.request(发送异步请求)、wx.navigateTo(路由跳转)，等等。具体的使用方式和其它API，参考微信官方开放文档API使用。
3.运行环境
与普通网页开发的区别
- 我们在网页开发中面对的环境是各种各样的浏览器，小程序开发需要面对的是手机操作系统，在移动端需要面对
Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。 - 小程序的线程划分更加友好。网页开发中，渲染线程和脚本线程是互斥的，长时间的脚本运行可能会导致页面失去响应。在小程序中，逻辑层和渲染层分为两个线程运行，一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端做中转，逻辑层发送网络请求也经由微信客户端转发，小程序的通信模型下图所示。
逻辑层的运行
网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。也能够在逻辑层中应用一些前端常用的库，比如jQuery、zepto等
小程序的逻辑层由于运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。
同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。
程序与页面
微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
通过app.json就能获取到当前小程序的一些基础配置，并识别出排在页面路径第一位的“首页”并加载
小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调被执行:
App({
onLaunch: function () {
}})
整个小程序只有一个App实例，加载新的页面不触发onlaunch回调。
当我们需要在新页面加载时触发事件，可以将方法写在每个页面js文件的onload中
Page({
data: {
logs: []
},
onLoad: function () {
}
})
应用生命周期app.js
（1）onLaunch: 初始化小程序时触发，全局只触发一次
（2）onShow: 小程序初始化完成或用户从后台切换到前台显示时触发
（3）onHide: 用户从前台切换到后台隐藏时触发
（4）onError:小程序发生脚本错误，或 api 调用失败
页面生命周期 各js文件中
（1）onLoad：首次进入页面加载时触发
（2）onShow：首次进入或重新进入页面时触发
（3）onReady：页面首次渲染完成时触发
（4）onHide：页面隐藏时触发
（5）onUnload：页面卸载时触发
下面是一些参考资料👇
微信公众平台
https://mp.weixin.qq.com/
小程序开发文档
https://developers.weixin.qq.com/miniprogram/dev/framework/
Vue官方文档
https://cn.vuejs.org/v2/guide/index.html
React官方文档
https://react.docschina.org
|