编写和发布你的第一个小程序

（注：这篇博客是博主在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 [email protected]

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中：

逻辑处理

页面有一些逻辑处理，例如点击时间、网络请求、生命周期回调等，此时放到一个js脚本中。将以将js脚本从home.vue中剥离出来，单独创建一个例如叫home.js的文件。
home.js编写好之后，可以这么导入home.vue中：

另外，一些变量也是放到这里。

风格调整

有时候，我们需要修改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	参考链接
Tab 切换	使用组件 “ 或用户切换	参考链接
重启动调用	调用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，以便清掉缓存；

. 在微信小程序管理后台，将刚刚上传的版本设置为体验版。

编写和发布你的第一个小程序