小程序开发之路入门（基础篇）
一、 准备工作
1、 注册一个微信小程序
注册页面.png
2、 微信小程序的开发工具下载地址
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3、小程序APi文档地址
https://developers.weixin.qq.com/miniprogram/dev/framework/
准备一个微信号
二、小程序正式开始
2.1、创建一个小程序项目
在微信小程序管理后台拿到对应appid、创建项目
创建小程序页面.jpg
2.2、项目代码结构
1、app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。
2、app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。
3、app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
我在实例程序的代码中还有2个文件夹，一个是pages,一个是utils,其中utils是放通用工具类方法的一个文件夹，pages是存放所有页面的文件夹。我们着重讲一下这个pages. 在这个示例中，我们有两个页面，index 页面和 logs 页面，即欢迎页和小程序启动日志的展示页，他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中，且 pages 中的第一个页面是小程序的首页。
每一个小程序页面是由同路径下同名的四个不同后缀文件组成的，如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。
项目代码结构.png
2.3、JS 基本页面配置
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
wx.stopPullDownRefresh()//停止当前页面下拉刷新
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
})
2.3、认识基本json页面配置+上拉刷新、下拉加载
{
"navigationBarBackgroundColor": "#f00",//修改顶部导航栏颜色
"navigationBarTitleText": "demo页面",//修改顶部导航栏文字
"backgroundTextStyle":"dark",//下拉 loading 的样式，仅支持 dark / light
"enablePullDownRefresh": true,//是否开启当前页面下拉刷新。
"onReachBottomDistance": 50,//页面上拉触底事件触发时距页面底部距离，单位为px。
"usingComponents": {}//页面自定义组件配置
}
2.4、认识wxml
<!-- blcok 它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。 -->
<block wx:if="isBlock">
<view>{{isBlock}}</view>
</block>
<block wx:else>
<view>{{isBlock}}</view>
</block>
<view></view>//块元素
<text></text>//行内元素
<image src="图片路径"></image>//有默认样式
<rich-text nodes="{{nodes}}"></rich-text>//富文本使用div span 等
Page({
data:{
isBlock:true,
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
},
children: [{
type: 'text',
text: 'Hello VIPKID的小伙伴!'
}]
}]
}
})
2.6、如何使用webView
承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用
<web-view src="webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名"></web-view>
2.7、小程序运行机制 （冷启动、热启动、销毁时机）
冷启动：如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动。
热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。
小程序销毁
需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。
当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）小程序会被微信主动销毁。
当小程序占用系统资源过高，可能会被系统销毁或被微信客户端主动回收。
前台/后台状态
当用户点击右上角胶囊按钮关闭小程序，或者按了设备Home键离开微信时，小程序并没有直接销毁，而是进入了后台状态；当用户再次进入微信或再次打开小程序，小程序又会从后台进入前台。
2.8、小程序路由
wx.navigateTo
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.redirectTo
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.reLaunch
关闭所有页面，打开到应用内的某个页面。
wx.switchTab
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.navigateBack
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
使用方法
//wxml里标签跳转
<navigator url="/pages/webView/webView?xxx=1" open-type="navigate">navigate</navigator>
<navigator url="/pages/webView/webView?xxx=1" open-type="redirect">redirect</navigator>
<navigator url="/pages/webView/webView?xxx=1" open-type="switchTab">switchTab</navigator>
<navigator url="/pages/webView/webView?xxx=1" open-type="reLaunch">reLaunch</navigator>
<navigator url="/pages/webView/webView?xxx=1" open-type="navigateBack">navigateBack</navigator>
//js 跳转
wx.redirectTo,wx.reLaunch,wx.switchTab,wx.navigateTo({
url:'/pages/webView/webView?xxx=1'//需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2'(需要跳转的 tabBar 页面的路径 (代码包路径)（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数。)
},
success: function(res) {
},
fail: function(res) {
},
complete:function(res) {
},
})
wx.navigateBack({
delta: 1// 返回的页面数，如果 delta 大于现有页面数，则返回到首页
})
2.9、如何发布小程序（查看开发版、体验版本）小程序更新机制
微信查找小程序开发助手、里面会有关联你所有小程序
查找小程序开发助手.jpg
找到对应的小程序查看开发版本、体验版本、线上版本。有不同的入口
小程序查看版本.jpg
找到小程序公众平台后台管理、版本管理进行修改开发版本、体验版、审核版本、发布版本
版本发布.png
小程序冷启动时，如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。
const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
// 请求完新版本信息的回调
console.log(res.hasUpdate)
})
updateManager.onUpdateReady(function () {
wx.showModal({
title: '更新提示',
content: '新版本已经准备好，是否重启应用？',
success(res) {
if (res.confirm) {
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate()
}
}
})
})
updateManager.onUpdateFailed(function () {
// 新版本下载失败
})
三、彩蛋（福利 用vue、react开发小程序）
vue也能开发 多端开发使用小程序（微信、支付宝、头条、抖音、h5）框架
kbone: https://github.com/Tencent/kbone
mpvue: http://mpvue.com/#_2
uniapp: https://uniapp.dcloud.io/
taro: https://taro.aotu.io/
