[TOC] # 相關鏈接 課程：[https://coding.imooc.com/learn/list/376.html](https://coding.imooc.com/learn/list/376.html) 課程文檔：[http://www.youbaobao.xyz/mpvue-docs/guide/base.html](http://www.youbaobao.xyz/mpvue-docs/guide/base.html) mpvue：[http://mpvue.com/](http://mpvue.com/) 課程設計稿：[http://www.youbaobao.xyz/mpvue-design/preview/#artboard0](http://www.youbaobao.xyz/mpvue-design/preview/#artboard0) 微信小程序 UI 庫：[https://github.com/youzan/vant-weapp](https://github.com/youzan/vant-weapp) 微信開發官網文檔：[https://developers.weixin.qq.com/miniprogram/dev/framework/](https://developers.weixin.qq.com/miniprogram/dev/framework/) 微信公眾平臺入口：[https://mp.weixin.qq.com](https://mp.weixin.qq.com/) # 小程序基礎 ## 代碼結構  * 小程序本質是一個渲染容器，可以把它想象成瀏覽器 * 小程序由 App 和 Page 兩部分構成 * App 需要依賴 2 個文件：app.js 和 app.json，其中 app.json 不可改名，且必須配置pages 屬性 * Page 需要依賴 4 個文件：js、json、wxml 和 wxss ## 授權流程  ⑴ 權限校驗：通過`mpvue.getSetting`判斷小程序是否獲得權限 >[success]查看[官方文檔](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/setting/wx.getSetting.html) ⑵ 用戶申請授權：如果小程序未獲得授權，我們需要提供用戶主動申請授權的功能，微信規定獲取用戶信息，必須用戶主動觸發，此時我們需要借助`button`組件完成用戶授權事件綁定，關鍵步驟： ```html <button @getuserinfo="getUserInfo" open-type="getUserInfo" > 授權登錄 </button> ``` 關于`getuserinfo`和`open-type`的 [官方說明](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html) 如下： | 屬性 | 說明 | | --- | --- | | open-type | 微信開放能力 | | bindgetuserinfo | 用戶點擊該按鈕時，會返回獲取到的用戶信息，回調的 detail 數據與 wx.getUserInfo 返回的一致，open-type="getUserInfo" 時有效 | ⑶ 獲取用戶信息：通過`mpvue.getUserInfo`獲取用戶信息 >[success]查看 [官方文檔](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html) ⑷ 獲取 openid：由于每個用戶在每個小程序都會獲得唯一的`openId`，所以`openId`非常適合用作用戶的唯一標識，獲取`openId`我們需要通過官方提供的`auth.code2Session`來獲取。 >[success]查看 [官方文檔](https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html) ⑸ 用戶登錄：通過`mpvue.login`進行用戶登錄，登錄后會獲得`code`，該`code`可用于獲取`openId`，但要注意`code`只能使用一次，用完即作廢 >[success]查看 [官方文檔](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html) ⑹ 用戶注冊：獲得`openId`后，我們可以通過該`openId`和用戶信息在小慕讀書中進行注冊 ## Tips 1、配置`app.json`的 pages 路由后會自動生成相應的文件（如 test.js / json / wxss / wxml） # mpVue * 2018 年 3 月 14 日 Release 1.0.2 版本，正式開源 * 2019 年 2 月 18 日 Release 2.0.2 版本，正式支持多端小程序 * mpvue 與原生小程序開發對比： | 對比項 | 原生小程序 | mpvue | | --- | --- | --- | | 學習成本 | 高 | 低 | | IDE | 不友好 | 友好 | | 多端開發 | 工作量大 | 一套代碼 | | 可復用性 | 低 | 高 | mpVue 原理概述： - `mpvue`保留了`vue.runtime`核心方法，無縫繼承了`Vue.js`的基礎能力 - `mpvue-template-compiler`提供了將`vue`的模板語法轉換到小程序的`wxml`語法的能力 - 修改了`vue`的建構配置，使之構建出符合小程序項目結構的代碼格式：`json/wxml/wxss/js`文件 ## 項目初始化及集成常用配置 **第一步，基于 mpvue-quickstart 模板創建新項目** ```txt vue init mpvue/mpvue-quickstart my-project ``` **第二步，安裝依賴和運行** ```txt cd my-project npm install npm run dev ``` 運行`npm run dev`后會在 dist 目錄下生成 wx 目錄，用微信開發者工具導入該目錄即可調試。 **第三步，集成 scss** `npm i -D sass-loader node-sass` 這里有個小坑，因為 mpvue 腳手架的 webpack 版本不是 4.0，使用最新版的 sass-loader 會報錯，因此需要下載 7.x 版本，如`npm i -D sass-loader@7.1.0` 使用： ```html <style lang="scss" scoped> .img { width: 100%; } </style> ``` **第四步，集成`vant-webapp`組件庫** [Vant Webapp - 小程序 UI 組件庫](https://youzan.github.io/vant-weapp/#/intro) `npm i vant-weapp -S --production` 引入組件： ```js { "usingComponents": { "van-button": "/path/to/vant-weapp/dist/button/index" } } ``` 需要手動在 app.json 中引入需要使用的組件，其實就是引入`node_modules/vant-weapp/dist`目錄下的組件 ```json { "pages": [ "pages/index/main" ], "window": { ... }, "usingComponents": { "van-button": "vant-weapp/dist/button/index" } } ``` 修改構建配置：修改`webpack.base.config.js`，否則報錯（webpack 打包后小程序訪問不到第三方類庫的問題） ```js if (/^wx$/.test(PLATFORM)) { // 判斷當前平臺是否為微信平臺 baseWebpackConfig = merge(baseWebpackConfig, { plugins: [ // 將 node_modules 目錄下該目錄文件全部拷貝到目標目錄 new CopyWebpackPlugin([{ from: resolve('node_modules/vant-weapp/dist'), to: resolve('dist/wx/vant-weapp/dist'), ignore: ['.*'] }]) ] }) } ``` 使用組件： ```html <van-button type="primary">按鈕</van-button> ``` **第五步：集成`mpvue-router-patch`插件** `github`地址：[https://github.com/F-loat/mpvue-router-patch](https://github.com/F-loat/mpvue-router-patch) 原生小程序使用官方提供的 API 進行路由跳轉，如果想使用 vue-router 的語法，需要這個插件。 安裝依賴：`npm i -S mpvue-router-patch` 安裝插件： ```js // src/main.js import MpvueRouterPatch from 'mpvue-router-patch' Vue.use(MpvueRouterPatch) ``` 使用： ```js this.$router.push('/pages/categoryList/main') ``` ### 集成其他插件 **集成`flyio`**：統一 http 請求 API，不同平臺一套代碼 `github`地址：[https://github.com/wendux/fly](https://github.com/wendux/fly) ```txt npm i -S flyio ``` 使用，初始化 Flyio 對象 ```js function createFly() { if (mpvuePlatform === 'wx') { const Fly = require('flyio/dist/npm/wx') return new Fly() } else { return null } } ``` 處理 get 請求 ```js export function get(url, params = {}) { const fly = createFly() if (fly) { return new Promise((resolve, reject) => { fly.get(url, params).then(response => { console.log(response) resolve(response) }).catch(err => { console.log(err) handleError(err) reject(err) }) }) } } ``` 處理 post 請求 ```js export function post(url, params = {}) { const fly = createFly() if (fly) { return new Promise((resolve, reject) => { fly.post(url, params).then(response => { console.log(response) resolve(response) }).catch(err => { console.log(err) handleError(err) reject(err) }) }) } } ``` 這里的`handleError`我們可以根據實際業務場景進行定制