（注：这篇博客是博主在2018年10月份写的一篇入门培训教程，由于时间原因一直没有发布，现在发布。中间几个月，不知道小程序知识体系有无发生变化，若有变化，请大家留言指出?）
1.开篇
小程序经过这1-2年的迅速发展，从最初被吐槽，到现在各类公司争相开发自己的小程序应用，甚至连阿里、百度、头条也推出了自己的小程序。这得益于小程序的轻量化、便于推广、获客成本低等优势，这是APP无法比拟的。当前小程序风口正盛，你是否有编写自己的小程序应用冲动呢？假如你已经有一定的vue.js基础，那现在就让我们动手编写自己的第一个小程序，并学会如何发布自己的小程序吧。
2.准备工作
1) 环境安装：https://nodejs.org/en/download/
安装npm管理包：版本>= 5.6.0
安装node.js：版本>= 8.9
2）安装IDE工具
微信开发者工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html。
VS Code: https://code.visualstudio.com/ 。代码编辑器，也可以用atom, 博主习惯用vs code。
3）脚手架
- mpvue(推荐): https://github.com/Meituan-Dianping/mpvue
安装：
由于众所周知的原因，可以考虑切换源为taobao源：
$ npm set registry https://registry.npm.taobao.org/
全局安装vue-cli，一般是要sudo权限的：
$ npm install --global vue-cli@2.9
- wepy：https://github.com/Tencent/wepy
注：推荐mpvue，本教程以mpvue作为脚手架来编写。理由：
- 沿用Vue.js前端开发技术
- 采用webpack构建机制
- npm 外部依赖
- 支持组件化开发，提高代码复用性
- Vuex 数据管理方案，便捷构建复杂应用
- H5 代码转换编译成小程序
3.项目结构介绍
- 创建一个名字为：wxa-train-guide小程序项目：
在命令行输入：vue init mpvue/mpvue-quickstart wxa-train-guide
- 新手一路回车选择默认就可以了。
- 安装依赖并运行项目
cd wxa-train-guide
npm install
npm run dev
- 用VS code打开项目，了解项目的目录结构
4.开发基础
为了简单说明怎么开发小程序，博主从简单到复杂，即从单页面开发开始，再介绍到多个页面开发。
1）单页面开发
界面设计
在pages文件件下创建一个home文件夹，copy一个main.js到这个文件夹下，然后创建一个home.vue文件，编写布局。
- 页面注册
home.vue编写好之后，我们需要在app.json中注册页面。
"pages": [
......
"pages/home/main"
],
- 样式设置
通常情况下，我们需要修改页面元素的样式，例如调节字体大小、颜色；图片高度、宽度等。这时候，就需要用到css样式了。建议将css样式从home.vue中剥离出来，单独创建一个例如叫home.css的文件。
home.css编写好之后，可以这么导入home.vue中：
<style src="./home.css" scoped></style>
- 逻辑处理
页面有一些逻辑处理，例如点击时间、网络请求、生命周期回调等，此时放到一个js脚本中。将以将js脚本从home.vue中剥离出来，单独创建一个例如叫home.js的文件。
home.js编写好之后，可以这么导入home.vue中：
<script src="./home.js"></script>
另外，一些变量也是放到这里。
- 风格调整
有时候，我们需要修改titlebar或tabbar的风格，但又想只对本页面有效，那么我们只需要在当前page下面创建一个main.json的文件，它会覆盖根目录下的全局main.json配置。我们在里面增加对应的风格内容。例如：
{
"navigationBarTitleText": "入门教程",
"navigationBarTextStyle": "black"
}
2）多页面开发
- 页面转跳——路由
| 类型 | 方法 | 备注 |
| 初始化 | 小程序打开的第一个页面，默认："pages/index/main" | 可以在发布小程序时修改 |
| 打开新页面 | 调用 API wx.navigateTo | 参考链接 |
| 使用组件 | 参考链接 | |
| 页面重定向 | 调用 API wx.redirectTo | 参考链接 |
| 使用组件 | 参考链接 | |
| 页面返回 | 调用 API wx.navigateBack | 参考链接 |
| 使用组件或用户按左上角返回按钮 | 参考链接 | |
| Tab 切换 | 调用 API wx.switchTab | 参考链接 |
| 使用组件 “ 或用户切换 | 参考链接 | |
| 重启动调用 | 调用API wx.reLaunch | 参考链接 |
| 使用组件 | 参考链接 |
- 跳转传参
参考上一步路由的链接说明，例如打开新页面，调用wx.navigateTo,传参id和size：
wx.navigateTo({
url:'../pages/home／home?id=11&size=4', //跳转页面的路径，可带参数 ？隔开，不同参数用 & 分隔
success:function(){} //成功后的回调；
fail：function(){} //失败后的回调；
complete：function(){} //结束后的回调(成功，失败都会执行)
} )
- 在哪里获取参数或页面状态变化时做些操作——生命周期
参数传递之后，我们可以在哪里获取传过来的参数。这里就涉及到页面生命周期了。一般在onLoad中读取参数，例如：
onLoad: function(option) {
let id = option.query.id
let size = option.query.size
}
- 扩展：生命周期
app部分：
onLaunch，初始化
onShow，当小程序启动，或从后台进入前台显示
onHide，当小程序从前台进入后台
在App.vue中监听以上回调。
page 部分：
onLoad，监听页面加载
onShow，监听页面显示
onReady，监听页面初次渲染完成
onHide，监听页面隐藏
onUnload，监听页面卸载
onPullDownRefresh，监听用户下拉动作
onReachBottom，页面上拉触底事件的处理函数
onShareAppMessage，用户点击右上角分享
onPageScroll，页面滚动
onTabItemTap, 当前是 tab 页时，点击 tab 时触发 （mpvue 0.0.16 支持）
在page中监听以上回调。
生命周期示意图
下图2生命周期引自mpvue官网。
- 怎么获取或修改其他页面的参数——状态管理、全局变量
当页面是顺序转跳的时候，我们可以通过转跳传参把参数传递到新页面。但有些情况，我们需要获取一些其他页面的处理结果。例如小程序启动时，已经登录认证保存了token，在某些页面需要用到token，这时候有两种解决方法。
A.状态管理--vuex
. 安装vuex：npm install vuex (init工程时已安装可以忽略）
. 声明：在根目录main.js中引入vuex并定义变量，例如定义变量“query”：
Vue.use(vuex)
const store = new vuex.Store({
state: {
query: ''
},
mutations: {
setQuery (state, val) {
state.query = val
}
}})
Vue.prototype = Object.assign(Vue.prototype, {
$store: store
})
. 修改变量”：
this.$store.commit('setQuery', query)
. 引用变量”：
this.globalData = this.$store.query
B.全局变量
.声明变量：在根目录main.js中，在const app = new Vue(App) 之后声明，例如：
Vue.prototype.globalData = 'ssss'
.修改变量：this.globalData = 'new value'
.引用变量：const value = this.globalData
全局方法
.定义方法：在根目录main.js中，在const app = new Vue(App) 之前添加，例如：
Vue.prototype.increaseData = function (a) {
return a + 1
}
.调用方法：const value = this.increaseData(11)
3）网络请求
- 网络库
| 方法 | 备注 |
| API：wx.request | 简单网络请求用API即可，参考链接 |
| Flyio | 博主习惯用这个网络库，参考链接 |
| vue-resource | 参考链接 |
| axios | 参考链接 |
- 配置域名
在src目录下创建一个config.js的文件，填写生产、测试配置的服务器域名。例如：
let env = process.env.ENV || 'test'
const config = {
test: {
baseUrl: 'https://aaaa.cn'
},
production: {
baseUrl: 'https://test.aaaa.cn'
}
}
export default config[env]
4.调试
1）打log
例如console.debug('xxxx')，通过日志调试。
2）远程调试
在VS code中设置断点，进行远程调试：在调试的地方插入debugger。
5.打包
1）打包脚本
. 先安装两个库：
A. rimraf：作用是每次打包前，先将原dist下面的文件和文件夹删掉。
B. cross-env：作用是设置及使用环境变量“ENV”。
. 分别在config／dev.env.js、config／prod.env.js下面添加下面一行内容：
ENV: '"' + process.env.ENV + '"'
. 将根目录下的package.json下的scripts的dev、start、build 命令行删掉，换为下属内容：
"dev": "rimraf dist && cross-env ENV=test node build/dev-server.js",
"start": "node build/dev-server.js",
"prod": "rimraf dist && cross-env ENV=prod node build/dev-server.js",
"build:test": "rimraf dist && cross-env ENV=test node build/build.js",
"build:prod": "rimraf dist && cross-env ENV=prod node build/build.js",
2）如何打包
. 测试包：
npm run dev ( npm run start 或 npm run build:test）
. 生产包：
npm run build:prod
6.发布
1）体验版
. 打包：
测试包：npm run dev ( npm run start 或 npm run build:test）
生产包：npm run build:prod
. 点击右上角的“上传”，把代码上传到小程序云服务器。版本号每次加1，以便清掉缓存；
. 在微信小程序管理后台，将刚刚上传的版本设置为体验版。
2）送审
测试OK之后，准备送审。在微信小程序管理后台，将目标体验版小程序送审。
3）发布
审核通过之后，就可以发布了。在微信小程序管理后台，发布目标体验版小程序。
7.结束语
小程序入门并不难，真正要掌握小程序，关键在于夯实前端开发基础。具体来说，就是要掌握ES6和Vue开发。下面是ES6和Vue基础参考教程。
ES6基础：http://es6.ruanyifeng.com/
VUE基础：https://cn.vuejs.org/
8.参考链接
mpvue官网：http://mpvue.com/
1011
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
