小程序开发流程

起步阶段

在官方文档中下载小程序的开发软件，根据自身需要下载所需版本。
官方小程序开发工具

下载完成之后进入开发工具界面，点击“+”号创建自己的第一个小程序。
注意，小程序目录有所限制，不在开发工具的指定目录之下无法成功创建，项目名称可自定义，在小程序的官网注册小程序成功后，会获得其唯一的AppID，在开发工具中填入就能成功创建小程序进入开发界面了。

小程序的基本框架

在完成小程序的创建之后，开发工具会完成最简单的框架构建

1、Page当中是各个页面。
2、Utils中写一些常用的配置，规则。
3、app.js是主页面的js文件，存放一些公共的方法，还有全局仓库。
4、App.json是全局的配置，路由，官方组件的配置，顶部导航栏的样式等等。
5、App.wxss就是全局的样式，这里编写的样式或作用在所有的页面当中。
Project.config.json是项目的依赖列表。

每一个页面有4个文件：
Js是页面的逻辑层
Json添加页面需要的组件和配置
Wxml是页面的视图层（和HTML差不多）
Wxss是页面的渲染层（和CSS一毛一样）
微信小程序的框架和Vue的十分类似，无论的命令，底层的数据渲染逻辑都很像，所以有接触过Vue框架的话微信小程序的学习成本就很低，就算是刚接触的也能很快上手。

常用的标签

页面编写常用的标签：<view>,<text>, <block>,<image>等。
1、<view>标签定义一个容易，相当于我们最常用的<div>标签
2、<text>标签定义一段文本，相当于<span>标签
3、<block>标签本身不会渲染到页面的DOM树当中，相当于<template>标签
4、<image>是图片标签，是在<img>标签的基础上进行的封装，在标签内有mode属性可以设置图片的显示区域，还有显示模式。（在小程序中使用html的标签无法识别哟）
5、在小程序中是没有<a>标签的，取而代之的是<web-3view>标签，在一个单独的页面中添加这一个标签，src中填写网址，就能实现跳转，如果不想在额外手动创建页面，要进行外部网页的跳转只能绑定事件来实现。

这是小程序封装之后的promise异步函数，在url中可以填写其他页面的相对路径，也可以填网址。

常用事件

官方事件文档
这就涉及到绑定事件了，在微信小程序中也有专门绑定事件的关键字，能够绑定的事件很多，我就不一 一举例了，我就说说常用的事件，其他事件可在官方文档中可以看到其事件的详细信息。

小程序中绑定事件和Vue的一样，在标签内部使用对应事件的属性，等号之后写绑定的函数即可。

单击：bind tap=””（注：有bind开头的事件都可以用catch替换来阻止冒泡）
长按之后松开：longpress=””（不会触发bindtap事件）
触摸开始时触发：touchstart=””
触摸移动时触发：touchmove=””
触摸结束时触发：ouchend=””

在事件前添加capture-bind、capture-catch关键字来中断捕获和取消冒泡，例：
capture-bind：bindtap=””
capture-catch：catchtap=””

小程序的生命周期

在小程序中创建一个新页面时，在他对应的js文件当中就会罗列出所有的生命周期函数和对应的触发条件，这也能帮助我们快速上手和了解各个生命钩子的用法。

1、 onload监听页面加载
2、 onReady监听页面初次渲染完成
3、 onShow监听页面显示
4、 onHide监听页面隐藏
5、 onUnload监听页面卸载
6、 onPullDownRefresh监听用户下拉动作
7、 onReachBottom监听上拉触底
8、 onShareAppMessage点击右上角分享触发

开发流程

（1）数据及方法
没个页面的js 文件中和vue一样，有一个Page({业务代码})对象，在其中有专门的data:{}对象存放数据，在页面中使用”{{}}”进行调用，函数方法不用放在例如methods里，和data以及其他生命周期函数同级即可。
修改数据需要单独调用this.setData(data:newdata )来修改。
双向绑定是在标签中添加model:value=”data”属性进行数据的双向绑定
（2）仓库
在微信小程序中是不需要额外引入仓库的，在app.js中写的方法就能在整个小程序的所有页面中调用，其中也专门有一个globalData对象来存放全局数据。
在其他页面当中引入”const app = getApp()” 就能直接app. globalData来直接调用或者改变全局数据。
修改仓库中的值不需要调用this.setData。
（3）组件
组件可以直接写在一个页面中，在其他页面中的json中进行注册，用法和Vue中的用法一样，直接使用标签包裹组件名即可。
“usingComponents”: {
“组件名”:”组件地址”
},
微信小程序中也有许多官方组件，直接注册和配置就可以直接使用，比如底部导航栏和授权的弹出框等。
官方组件：https://developers.weixin.qq.com/miniprogram/dev/component/
（4）权限获取
在微信小程序中的各种权限获取都是经过官方封装过的，在页面中直接调用即可。
通过调用wx.getSetting函数，配置其中的scope的值来获取相应的权限。

wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.record']) { //获取录音权限
          wx.authorize({
            scope: 'scope.record',
            success() {
              console.log('授权成功')
            },
		}else if(res.cancel){console.log(“用户点击取消”)}
        fail(){},

其他权限关键字

（5）网络请求
网络请求在小程序中也是封装过的，不需要额外引入axios或者是jquery。
获取到的信息只需要在仓库中定义变量保存起来，就能完成缓存。

审核以及发布

项目开发完成之后就需要发布项目，这里首先需要在开发工具中将本地的代码上传进行审核，等待5天左右才能有审核结果，一年有一次加急审核的机会。

在页面主页的版本当中就能在开发版本那一栏看到自己上传的版本信息，开发版本可以有多个，但上传审核的只能有一个，审核通过之后，就能上线成为线上版本。

开发过程的问题总结

（1）微信小程序总体来说还是比较简单的，无论是逻辑还是页面布局，有一定vue的基础的话能很快上手，很多方法也是官方封装过的，使用很方便，但相对的，小程序限制整个包的大小，性能也有限，想要使用外部的UI的组件或者框架的话，就会很麻烦，甚至是无法使用。

（2）在开发过程中，就遇到需要把用户录音的时长和日期同步到一个表格当中，这个表我用的是eChart，而eChart在小程序中使用必须是在Page对象之外调用才能生效，而在Page对象之外的eChart实例就无法在小程序中获取到，也就无法在生命周期中重复调用setOption方法来刷新表格，我想到的解决方案就是在创建eChart对象的时候，将实例保存在仓库当中。触发生命钩子时直接调用仓库中的实例来进行刷新。

（3）在开发测试阶段请求数据端口，在设置中的项目设置，勾选不校验域名就能通过IP地址进行通讯，但审核通过，发布到线上之后，实机操作无法获取到数据。上线版本必须按照官方的接口需求才能正常的进行接口通讯。
官方接口要求
（4）在小程序中是不允许直接使用IP来作为调用端口的，必须使用已经注册的网络地址作为调用端口，在小程序官网中登记这个端口，上线版的端口才能正常调用。如果在开发环境想要测试端口的话，可以在开发工具中设置不校验域名，不然会报警告，并且不能正常调用，但如果直接这样上线的话，这样的端口就是无效的。