demo github地址: https://github.com/zkl904/mpvueFX.git

注意：這里用的小程序平臺(tái)的網(wǎng)址用的是我個(gè)人的賬號(hào)鏈接， 所以登錄的時(shí)候會(huì)要求重新登錄叹谁， 使用自己的賬號(hào)即可

1: 小程序賬號(hào)的注冊(cè)

小程序文檔地址: https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

小程序平臺(tái)登陸: https://mp.weixin.qq.com/

小程序開(kāi)發(fā)者工具下載; https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

獲取appid 以及 appsecret: https://mp.weixin.qq.com/wxopen/devprofile?action=get_profile&token=674021264&lang=zh_CN

1.1步驟:

1. 先申請(qǐng)一個(gè)小程序賬號(hào)
3個(gè) 步驟: 賬號(hào)信息 => 郵箱激活 => 信息登陸

1.png

這三個(gè)步驟填寫(xiě)完成后 進(jìn)入小程序平臺(tái),

1. 填好小程序信息

image.png

2. 添加相應(yīng)的開(kāi)發(fā)者

image.png

2. 下載好開(kāi)發(fā)者工具

小程序開(kāi)發(fā)者工具下載; https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3. 使用mpvue 進(jìn)行小程序的開(kāi)發(fā)

vue官網(wǎng): https://cn.vuejs.org/

mpvue官網(wǎng): http://mpvue.com/

mpvue項(xiàng)目合集: https://github.com/Meituan-Dianping/mpvue/issues/21

mpvue中出現(xiàn)的一些問(wèn)題以及相應(yīng)的解決方法: https://github.com/Meituan-Dianping/mpvue/issues

mpvue組件工具合集: https://github.com/mpvue/awesome-mpvue

注: 使用mpvue 需要一定的vue基礎(chǔ) , 開(kāi)始使用之前最好先熟悉一些vue相關(guān)的一些語(yǔ)法

原生開(kāi)發(fā)小程序 和 wepy 、 mpvue 對(duì)比

image.png

整體來(lái)說(shuō), 使用mpvue來(lái)開(kāi)發(fā)小程序?qū)W習(xí)成本是最低的

3.1 開(kāi)始搭建mpvue項(xiàng)目

(1): 若是之前沒(méi)有安裝過(guò)vue-cli , 先安裝vue-cli
(2): 開(kāi)始創(chuàng)建mpvue 項(xiàng)目

$ npm install -g vue-cli  // 全局安裝vue-cli
$ vue init mpvue/mpvue-quickstart my-project  // 快速生成項(xiàng)目模版

image.png

其中appid查看 :

image.png

這樣就建好了一個(gè)項(xiàng)目快速啟動(dòng)模板

(3): 安裝相應(yīng)的插件

(4): 編譯一下文件 , 生成一個(gè)dist 文件, 小程序使用的代碼就是這里的dist代碼

$ npm install   // 安裝相應(yīng)的插件
$ npm run dev  // 編譯生成一個(gè)dist文件

注: 項(xiàng)目拉下來(lái)之后記得先編譯一下 , 生成dist 文件

image.png

關(guān)于微信開(kāi)發(fā)者工具的使用: https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

3.2 上傳代碼功能

上傳完代碼之后可以在 https://mp.weixin.qq.com/wxopen/wacodepage?action=getcodepage&token=194289795&lang=zh_CN 中看到

image.png

image.png

注: 這里的開(kāi)發(fā)版本 只會(huì)有一個(gè) , 之前有的 會(huì)被后上的給頂?shù)?/p>

3.3 編寫(xiě)一個(gè)簡(jiǎn)單的小程序頁(yè)面

首先是頁(yè)面的結(jié)構(gòu) :

image.png

注: 一個(gè)頁(yè)面上有三個(gè)配置 , 分別是 xx.json xx.vue main.js 其中xx.json 是頁(yè)面配置文件 , xx.vue 是頁(yè)面的主代碼 , main.js 是頁(yè)面的入口文件 ,三個(gè)文件組成一個(gè)完整的頁(yè)面 , 而且每次新增一個(gè)頁(yè)面都必須要重新 npm run dev 一下重新編譯dist文件 , 十分的不方便, 后面使用mpvue-entry 和 mpvue-router-patch來(lái)整合和簡(jiǎn)潔化頁(yè)面

3.3.1 安裝stylus 和 stylus-loader

可以使用stylus 來(lái)編寫(xiě)css
stylus文檔: https://www.zhangxinxu.com/jq/stylus/

$ npm install stylus --save-dev
$ npm install stylus-loader --save-dev

驗(yàn)證下是否可以使用stylus , 在style標(biāo)簽中添加 lang="stylus" rel="stylesheet/stylus"

image.png

3.3.2安裝mpvue-entry 和 mpvue-router-path

mpvue-entry文檔 : https://www.npmjs.com/package/mpvue-entry?activeTab=readme
mpvue-rotuer-patch 文檔: http://npm.taobao.org/package/mpvue-router-patch

$ npm install mpvue-entry -D
$ npm install mpvue-router-patch -D

3.3.2.1: mpvue-entry 相關(guān)配置

(1): 在src 文件夾下面 建一個(gè)router 文件夾 , 在新建一個(gè)index.js 文件 , 做為路由頁(yè)面的編寫(xiě)

image.png

(2): 在webpack.base.conf.js 中進(jìn)行相應(yīng)的配置

image.png

注: 在mpvue-loader 1.10 版本后 , 注意 需要 刪去plugins中的一段

/*webpack.base.conf.js 頁(yè)面*/

const MpvueEntry = require('mpvue-entry')
....
const entry = MpvueEntry.getEntry({
  pages: 'src/router/index.js',
  main: 'src/main.js'
})

module.exports = {
  entry,
  ...
  plugins: [
    new MpvuePlugin(),
    new MpvueEntry(),
    /*new CopyWebpackPlugin([{  // 這段需要注釋掉, 不然會(huì)報(bào)錯(cuò)
      from: '**!/!*.json',
      to: ''
    }], {
      context: 'src/'
    }),*/
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: path.resolve(__dirname, '../dist/static'),
        ignore: ['.*']
      }
    ])
  ]
}

/* router/index 頁(yè)面的配置 */
// 重新配置一下頁(yè)面   支持新增頁(yè)面熱更新
module.exports = [
  {
    path: 'pages/index/index',
    config: {
      navigationBarTitleText: '首頁(yè)',
    }
  },
  {
    path: 'pages/counter/index',
    config: {
      navigationBarTitleText: 'counter頁(yè)面',
    }
  }
]

3.3.2.2: mpvue-router-patch 相關(guān)配置

// src下面的main.js
import Vue from 'vue'
import MpvueRouterPatch from 'mpvue-router-patch'

Vue.use(MpvueRouterPatch)

安裝完后檢測(cè)下是否可以使用 router語(yǔ)法:
新建一個(gè)home頁(yè)面

<template>
    <div>
        ....
        <div @click="goHome">點(diǎn)我去home頁(yè)面</div>
    </div>
</template>
<script>
export default {
    data() {
    },
    methods: {
       goHome() {
           this.$router.push('/pages/home/index')
       } 
    }
}
</script>

4. mpvue 的一些坑點(diǎn)

(1) : mpvue項(xiàng)目中所有頁(yè)面的 created 函數(shù)都會(huì)在最開(kāi)始就執(zhí)行 , 即使這個(gè)頁(yè)面沒(méi)有運(yùn)行 解決方法; 使用小程序的 onLoad 函數(shù) 或者 onShow函數(shù) 代替 (要讓tabar頁(yè)面進(jìn)入就調(diào)用一次接口就用onShow)

image.png

image.png

(2): 本地圖片處理方法, 在小程序中要是使用background的話, 必須得是遠(yuǎn)程圖片 , 本地圖片也是可以的, 但是得小于8k , 因?yàn)?mpvue會(huì)把它編譯成base64格式的 , 不能被編譯成base64的圖片一律放在static中 , img需要的 圖片要是放在本地的話 , 要放在static中 ,而不要放在相鄰的images文件夾中 (最好把圖片都放在服務(wù)器上面 , 小程序編譯大小得小于2m)

image.png

image.png

(3): class 與 style 要是使用computed綁定的話 , 是不能 return 一個(gè) object對(duì)象的 (這樣的寫(xiě)法在vue中是很常用的, 當(dāng)時(shí)mpvue中不行, 而且不會(huì)報(bào)錯(cuò),很坑 , 但是頁(yè)面上不會(huì)有效果)

image.png

image.png

(4): 小程序中不支持dom操作 , 因?yàn)樾〕绦驔](méi)有dom , 因此vue中的 ref 不能用

image.png

(5): mpvue中 不能隨意的調(diào)用method中的方法 , 除了@click, @input 這種 , 其余的情況在template中是不能調(diào)用函數(shù)方法的 , 這個(gè)很坑, 只能調(diào)用computed計(jì)算屬性代替 ,但是computed不能傳遞參數(shù) , 那些實(shí)在需要參 數(shù)的可以使用組件來(lái)代替

image.png

image.png

(6): 小程序中不能使用過(guò)濾器 , 解決方法 ; (1) : 使用computed 代替 , 平時(shí)是還可以 , 但是在v-for得傳遞一個(gè)item參數(shù), 就不能使用這個(gè)方法了 (2) : 編寫(xiě)一個(gè)filter組件 , 使用props 來(lái)傳遞參數(shù)

            詳情見(jiàn)代碼文件

(7): 寫(xiě)在template中的行內(nèi)樣式中的px是不會(huì)轉(zhuǎn)化為rpx的 , 因此行內(nèi)樣式直接用rpx 就可以了(也就是style里面的樣式) css中的樣式都會(huì)轉(zhuǎn)化為rpx 格式 (px2rpx-loader插件)

image.png

這里的換算關(guān)系: rpx單位是微信小程序中css的尺寸單位凡怎，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng) ,在小程序中規(guī)定屏幕寬為750rpx镣典。如在 iPhone6 上膳叨，屏幕寬度為375px, iPhone5為320px , iPhone6s: 414px
設(shè)備 rpx換算px (屏幕寬度/750) px換算rpx (750/屏幕寬度)
iPhone5 1rpx = (320/750) = 0.42px 　　 1px =(750/320) = 2.34px
iPhone6 1rpx =(375/750) = 0.5px 　　　　 1px =(750/375) = 2rpx
iPhone6s 1rpx =(414/750) = 0.552px 　　 1px =(750/414) = 1.81rpx

image.png

image.png

(8): 在mpvue的css中使用*選擇所有的元素是不起效果的 (不會(huì)報(bào)錯(cuò),但是無(wú)效 , 并不會(huì)進(jìn)行變色)

image.png

image.png

(9): 在小程序中使用animate動(dòng)畫(huà), 可以使用微信的animation動(dòng)畫(huà)api , 但是微信的animation不提供循環(huán)功能 , 可以使用css3的動(dòng)畫(huà) , 注: 使用@keyframes 的時(shí)候要加上前綴 , 不然編譯的時(shí)候stylus會(huì)把前綴都寫(xiě)上, 其 中的-moz-, -o- 這兩個(gè)就會(huì)引起報(bào)錯(cuò) , 因此可以直接加上前綴 @ -webkit-keyframes
直接使用@keyframes報(bào)錯(cuò) 具體暫時(shí)看代碼

image.png

image.png