最近团队H5开发资源紧张，客户端开发同学资源略有闲置，所以决定让客户端同学也了解和熟悉小程序开发/快应用/小程序开发，以作后备。
这一系列的分享主要是引导有兴趣的同学能够快速入门小程序开发，不会有太深入的技术研究，目的是让客户端同学可以快速的进行小程序开发工作。
1.概要
1.1 开发文档：
官方的开发文档是最好的教程，我们接下来的所有知识点都是基于官方的开发文档的，所以实际开发过程中，随时翻阅开发文档很重要，不管是技术方面，还是合规方面，以及小程序的特殊要求，都可以在官方文档中找到。
官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18111920
1.2 微信开发管理后台
1.2.1 地址
1.2.2 账号
绑定在公众号下面的小程序账号也需要注册，每个小程序账号都必须要有一个管理员，小程序后台需要录入管理员的身份证信息，每个身份证下面最多只能做5个小程序的管理员。
1.2.3 功能
这里只介绍开发管理功能和设置功能，其他的功能暂时与技术开发无关。
开发管理：这里主要用来进行上线版本的管理，包括已上线/未通过审核/审核中/已上传的版本
设置：
a.基本设置：想要新建一个可上线的小程序工程，则必须要有AppID，只有完善了小程序的基本信息，才能生成AppID
b.开发设置：完成基本设置之后，就可以开到AppID了。除此以外，小程序能访问的服务器域名（Api调用域名）、业务域名（H5的域名）需要在此进行配置，否则，真机中的小程序都将报错。同时，这些域名的修改每月都有次数限制。
1.3 开发工具：
这里只介绍微信官方提供的开发工具，当然市面上可以用来进行微信小程序开发的工具有很多，这里就不介绍了，有兴趣的同学可以自己百度（这里建议不要Google，中国的东西找百度还是靠谱些）
官方开发工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
1.3.1 新建工程
a.项目目录：小程序本地所在的文件夹
b.AppID:申请了小程序开发账号之后，在微信小程序开发管理后台可以看到AppID
c.项目名称：尽量起名为上线时的名称
1.3.2 模拟器
微信小程序的模拟器应该是最好用的，相较于快应用必须要使用真机来搭建模拟器环境的方案，小程序的模拟器甩了快应用十八条街都不止。iOS的模拟器还可以，但是编译速度远比不上小程序的，Android的模拟器就更加不用提了，所以使用微信小程序的模拟器进行初期开发，是一种很好的选择。
1.3.3 编辑器与调试器
做过客户端开发的同学应该不会太习惯小程序的这套逻辑，代码coding完成后，如果需要调试，是需要进入到调试器中才能进行调试，实际表现上，编译器中的代码是编译之前的，调试器中的代码是编译之后的，所以会存在两份几乎一样的代码，初期不熟悉的时候容易把两者弄混，导致出错。
调试器的下方是常见的打印区，熟悉H5开发的同学会觉得这个界面非常的亲切。
1.3.4 编译与预览
保存功能会默认进行编译，所以想要重新编译新的代码，使用保存功能即可，点击编译可。
预览是指开发工具会生成一个小程序临时二维码，只有被加入到了开发者计划中的微信用户，才可通过扫描该二维码打开开发中的小程序，只要是在真机中运行的小程序只支持https，模拟器中可以选择是否支持http。
1.3.5 详情
最右边的详情按钮是个很重要的按钮，当前开发的小程序的基本信息都在里面了。
小程序包最大只能为2M，小游戏包最大只能为4M，开发时要时刻注意，点击详情按钮刻意随时查看包的大小。
此处可以设置模拟器中是否支持http方式，是否校验服务器域名和业务域名。
2.开发基本知识
这一节主要介绍开发所需的基础知识。
2.1 项目工程结构
pages：主要用来存放页面文件的文件夹。
utils：主要用来存放一些工具类的文件夹，这里面一般只有js文件。
app.js:这是小程序的入口，iOS可以类比为AppDelegate（UIApplication)的对象，Android可以类比为Application
app.json:这是小程序的页面相关的配置文件，比如页面路径，导航的颜色等。
app.wxss：这是一个总的样式文件，可以理解为样式的基类。
project.config.json:这是小程序的配置文件，类似于iOS的info.plist,Android的build.gradle
assets：这个文件夹本身是不存在的，不过页面文件的图片需要存放，所以我这里新建了这个图片文件的文件夹，专门用来存放图片，这里按照iOS的风格起名为assets。
2.2 四件套
小程序开发和H5开发很相似，包括实际开发中用的语言和技术，大部分和H5开发是重叠的，还有一部分是微信团队在H5开发的基础上进行了二次封装。所以小程序开发的基础是H5的三件套：js,css,xml。微信进行了二次封装之后，变成了js，wxss，wxml，同时，微信在此基础上，添加了一个json文件，接下来会详细介绍这四个文件的作用。
js：这里主要是页面的逻辑，类似于Android的activity文件，iOS的VC文件
json：这个文件的主要作用是当前页面的配置，主要是针对导航的，比如导航的标题，颜色等
wxml：这个文件主要是页面的结构，Android：fragment；iOS:IB文件
wxss：这个文件主要是页面元素的样式的描述，同样的，Android：fragment；iOS:IB文件
2.3 常见的基础知识
2.3.1 数据类型
微信小程序开发中有三种数据类型，分别是：
const：全局变量，不开修改，一般用于声明工具类
var：全局变量，可修改
let：局部变量，可修改
2.3.2 文件的引用
a.在相同文件夹中引用：const file = require("file.js")
b.在不同文件夹中引用：const file = require("../util/file.js"),这里的../ 表示当前文件夹的上一级文件夹
2.3.3 方法的调用
2.3.3.1 同一js文件中的方法调用：
a.单例类：functionName()
b.普通类：this.functionName()
2.3.3.2 不同js文件中的方法调用：
a.单例类：需要在单例类中添加如下代码：
module.exports = {
publicFunctionName1:privateFunctionName1,
publicFunctionName2:privateFunctionName2
}
b.普通类：一般普通类的js方法不对外开放
2.3.4 this
page类中的this可以理解为当前js对象，类似于iOS中的self，或者Android中的this。
如果一个闭包要使用this，则必须在闭包外声明：var that = this ，否则将报错。
2.3.5 app.js
获取当前App对象var app = getApp() 在任何地方都可以通过该函数获取到app.js对象。
2.3.6 数据的传递
2.3.5.1 将数据传给单例类
想要将page中的数据传递给单例类，比如page的js中调用网络通信的工具类，一般直接通过工具类的方法进行传递即可，和传统的iOS/Android开发并无差别
2.3.5.2 page1.js传递数据到page2.js
a.可以通过app.js中进行传递
在page1.js中：var app = getApp() ；app.data.tmpData = "测试数据"
在page2.js中：var app = getApp() ；let tmpData = app.data.tmpData
b.可以通过路径进行传递，此处可以传递map对象或者一般的string对象都可以
在page1.js中：
wx.navigateTo({
url:"../home/home?tmpData=" + "测试数据"
})
在page2.js中的onload函数中：
onload:function(options){
let tmpData = options.tmpData
}
网友评论