微信小程序结合mpvue从0到1（二）

这篇主要讲讲小程序文件运行顺序，也就是说从入口文件到调用各类交互是怎么实现的。

入口文件解读

1.在mapvue项目中，也就是实际编写的时候我们的项目入口自然就是main.js文件，在main.js文件里面我们会注册全局组件，引入全局使用的样式，插件等等。

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue(App)
app.$mount()

2.在小程序原生项目中的入口文件是app.js,该文件也是一个全局文件，可以在该文件定义全局所需要的数据对象，调用方法等，如下所示

App({onLaunch: function () {// 展示本地存储能力var logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionId}})// 获取用户信息wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框wx.getUserInfo({success: res => {// 可以将 res 发送给后台解码出 unionIdthis.globalData.userInfo = res.userInfo// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况if (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}}})}}})},globalData: {userInfo: null}
})

app.js里面还可以有下列方法

onLaunch : function(){}：//页面加载完成后执行
onLoad:function(options){}：页面初始化 options 为页面跳转所传递过来的参数
onReady:function(){}：页面渲染完成
onShow:function(){}：页面显示
onHide:function(){}：页面隐藏
onUnload：function(){}：页面关闭

配置首页

1.在mpvue里面，是单页面文件，默认会渲染app.vue（main.js中挂载在vue上渲染的文件，可以自己配置，默认是app.vue）中的模板文件；在app.vue文件中可以定义全局样式，如背景颜色，字体大小等等；
下面代码块是mpvue quick模板的默认app.vue代码

<script>
export default {created () {// 调用API从本地缓存中获取数据/** 平台 api 差异的处理方式:  api 方法统一挂载到 mpvue 名称空间, 平台判断通过 mpvuePlatform 特征字符串* 微信：mpvue === wx, mpvuePlatform === 'wx'* 头条：mpvue === tt, mpvuePlatform === 'tt'* 百度：mpvue === swan, mpvuePlatform === 'swan'* 支付宝(蚂蚁)：mpvue === my, mpvuePlatform === 'my'*/let logsif (mpvuePlatform === 'my') {logs = mpvue.getStorageSync({key: 'logs'}).data || []logs.unshift(Date.now())mpvue.setStorageSync({key: 'logs',data: logs})} else {logs = mpvue.getStorageSync('logs') || []logs.unshift(Date.now())mpvue.setStorageSync('logs', logs)}},log () {console.log(`log at:${Date.now()}`)}
}
</script>
<style>
.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 200rpx 0;box-sizing: border-box;
}
/* this rule will be remove */
* {transition: width 2s;-moz-transition: width 2s;-webkit-transition: width 2s;-o-transition: width 2s;
}
</style>

2.在小程序中配置文件如下
全部配置请参考：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

{"pages": [//配置小程序页面路径，首页默认加载第一个路径，这里第一个是index,如果把logs放第一个首页就是logs"pages/index/index","pages/logs/logs"],"window": {"backgroundTextStyle": "light",//下拉 loading 的样式，仅支持dark/light"navigationBarBackgroundColor": "#fff",//导航栏背景颜色"navigationBarTitleText": "WeChat",//导航栏标题文字内容"navigationBarTextStyle": "black"//导航栏标题颜色，仅支持 black / white},"style": "v2","sitemapLocation": "sitemap.json"
}

index页面wxml如下,看起来跟vue的模板文件很像吧：

<!--index.wxml-->
<view class="container"><view class="userinfo"><button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button><block wx:else><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view><view class="usermotto"><text class="user-motto">{{motto}}</text></view>
</view>

小程序中每个页面文件是这样的，在json文件里写页面需要用到的数据，wxml相当于vue文件中的template模板，wxss即书写样式文件，js写交互方法；

页面跳转

1.mpvue里面有两种方式，一是跟原生小程序一样的跳转方式，下面介绍，二是和vue项目一样的路由跳转

路由跳转：在mpvue 中使用 vue-router兼容的路由 mpvue-router-patch，先安装mpvue-router-patch，在main.js里面配置好，使用方法和vue一样；mpvue-router-patch具体使用方法

2.小程序跳转方式

最常见的wx.navigateTo({}),保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回;

wx.navigateTo({url:'../log/logs?id=1',  //跳转页面的路径，相对路径，可带参数，不需要.wxml后缀, 传递的参数在接收页面onLoad()函数中得到值：option.id就可以得到了success:function(){}        //成功后的回调；fail：function(){}          //失败后的回调；complete：function(){}      //结束后的回调(成功，失败都会执行)})onLoad: function (option) {console.log(option)//可以打印一下option看查看参数}

wx.redirectTo()//关闭当前页面，跳转到非tabBar的某个页面
使用组件示例：点击跳转
wx.switchTab ，跳转到tabBar的某个页面