小程序开发（一）| 简介

小程序开发（一）|简介1. 发展每一款手机app的开发都有webview的部分，所以微信小程序也就是微信中的webview代码构成所发展出来的产物。微信中的webview逐渐成为移动web的重要入口，对提升用户体验有着很大的帮助，因此微信对其加工，提供了一系列JS API。一开始，这些API只在微信内部被使用，直到2015年初，微信发布了一套网页开发工具包，称之为JS-SDK，开放了拍摄、录音、语

ssssy10000

2085人浏览 · 2022-01-12 19:11:57

ssssy10000 · 2022-01-12 19:11:57 发布

小程序开发（一）| 简介

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
  },
//采用新版组件v2样式
  "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