使用mpvue開發 微信小程序，以及小程序開發踩過的坑

時間  2019-11-06
標籤 使用 mpvue 開發 微信 程序 以及 简体版
原文   原文鏈接

使用mpvue開發小程序---Vuex（store）的支持

mpvue提供了vue的語法編譯爲小程序的能力，可是仍是有些侷限，不過能作到跟vue差很少已經很不錯了。css

我在項目中按照vue初始化 store 的時候，本覺得能像vue里正常使用vuex的一些功能，發現報錯 TypeError: Cannot read property 'state' of undefined，一會兒懵逼了，在pages的頁面裏打印 this對象，發現並沒 $store屬性，也就是說mpvue對store並無初始化成功，苦瓜臉...html

百度中... 不負有心人~~~vue

緣由以下：web

mpvue使用上，vuex和以往相似，不一樣的是，小程序以多頁形式渲染，故每一個頁面都須要建立vue實例並引入相應的store模塊，入口配置大概以下：vuex

import Vue from 'vue';
import Vuex from 'vuex';
import store from './store';
import App from './index';

Vue.use(Vuex);

const app = new Vue({
    ...App,
    store
});

app.$mount();

注意：是每一個頁面都要初始化渲染... （很麻煩的感受）json

親測可用，終於能夠起飛了~~~canvas

小程序轉發實現

分享的頁面若是須要參數就必定要傳參，而且path要寫app.json中所配置的絕對路徑小程序

在作小程序分享這部分的時候，一開始常常會遇到頁面不存在的狀況，後面才發覺通常遇到這種狀況都是由於使用 onShareAppMessage() 方法時path沒有寫對，這時只須要將app.json中配置該頁面的路徑直接複製過來就好啦！微信小程序

// app.json
{
"pages":[
    "pages/test/test"    //  ①
]
}
// test.js
onShareAppMessage: function () {
    return {
    title: '自定義轉發標題',
    path: 'pages/test/test?id=123',   //此處所寫路徑與 ① 處相同，若頁面需傳參數，記得把參數帶上
    }
},

而後分享後的頁面打開，在onLoad(opt)函數裏面，經過 opt.id便可獲取到傳入的參數值。若是其它函數裏用到的話，可經過this.$root.$mp.query.id獲取api

測試分享，分享出去的頁面緩存嚴重？

我轉發後，去轉發的手機點開，感受老是沒有變化，無論怎麼改，改來改去，改去改來，仍是上一次的數據或者返回結果。屢次測試才知道，轉發後的頁面，也須要先掃一下微信開發者工具，更新到最新代碼才能夠。（如今的小程序已經有分享提示了，提示要求保證要分享的手機也是最新的開發代碼）

小程序點擊一次，生成多個formId，以實現多條通知問題。

小程序實現通知推送，能夠經過點擊表單生成一個formId,還有一個支付方法，生成訂單。發給後臺，可實現通知推送。可是，若是實現點擊一次，就新建出多條通知呢(生成多個formId)。。。

暫時沒有比較好的解決方案，採用這篇文章裏的方案。。。解決小程序點擊一次，提交多個表單，獲取多個formId的方法

小程序報錯pages/xxx/xxx.js 出現腳本錯誤或者未正確調用 Page()

出現這個錯誤是由於你尚未寫js,也就是js裏面是空的,

首先看下你的vue文件，是否是空文件，通常新建的時候，都是空文件，而後也會報錯誤，而後看下 main.js裏的文件是否是寫入js

再者，修改src文件的 main.js時，須要重啓服務

而後刷新就好啦

還沒效果，重啓微信開發者工具，就能夠了

其實這個問題本質就是頁面或者js錯誤

我以前用...mapStates()獲取數據的時候，沒有加中括號，好比...mapStates('openid')，這樣也會報這個錯誤

微信小程序--背景圖片手機沒法預覽

小程序引用本地資源圖片文件，編譯後路徑顯示 -do-not-use-local-path-，調試很久，本地圖片就是不顯示

小程序官方文檔說明：本地資源沒法經過 WXSS 獲取

background-image：可使用網絡圖片，或者 base64，或者使用<image/>標籤

https://developers.weixin.qq.com/miniprogram/dev/qa.html

小程序橫向滾動定位到指定位置問題

本身一開始用css的overflow-x:auto,能夠實現滾動，可是卻不能用原生js,document.getElementById['a'].scrollLeft 去設置滾動距離了

而後使用看了下文檔，發現有 scroll-view 組件，直接拿來用，用文檔的scroll-left定位 寫法發現怎麼也不能定位到特定位置

而後搜了一圈是發現本身的樣式寫的有問題，必須用下面的寫法。。。

<scroll-view scroll-x class="scroll-header" scroll-left="200">
    <view id="green" class="scroll-view-item bc_green"></view>
    <view id="red" class="scroll-view-item bc_red"></view>
    <view id="yellow" class="scroll-view-item bc_yellow"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
</scroll-view>

<style lang="scss">
    .scroll-header {
        //width: 1000rpx;  //注意：不能加寬度！！！不然會失效
        display: flex;
        white-space: nowrap; //很重要
        view {
            height: 128rpx;
            width: 128rpx;
            border: 1px solid red;
            display: inline-block; //很重要
        }
    }
    .bc_green{
        background: green
    }
    .bc_red{
        background: red
    }
    .bc_blue{
        background: blue
    }
    .bc_yellow{
        background: yellow
    }   
</style>

小程序分享報錯 Cannot read property 'apply' of null;at page XXX onShareAppMessage function

而後看了下本身的代碼，分享按鈕在子組件裏， at page XXX ， XXX是本身組件的父級，

也就是說 onShareAppMessage() 分享函數，不能再子組件去觸發父級的分享。。。

把 onShareAppMessage 放在父級就好啦

小程序 tabBar 正確使用姿式

劃重點！！！！

根據這篇文章https://www.cnblogs.com/huangjialin/p/6278429.html

底部頁面的註冊必定要注意，第一個必定是要是最早顯示的，不然會出現底部導航看不到。

把tab1設置爲首頁，哇塞，直接出來三個底部導航了~~~~

在某些業務需求下，我須要先顯示首頁，好比我首頁是index，tabBar是 tab1,tab2,tab3，可是發現之前的 navigator跳轉失靈了！！！

可是，我就是想讓index在首頁怎麼辦！！！

首頁的跳轉 navigator open-type設置爲switchTab 可跳轉到 tabBar頁面！！！

<navigator open-type="switchTab" url="/pages/tab1/main">
    ....
</navigator>

完美~~~

隱藏canvas的狀況下不能導出圖片？

如今須要作一個圖片處理的功能 可是又不須要canvas顯示在頁面上，

我嘗試了不少隱藏的方法 結果都是兩種：

  1. canvas始終顯示並且顯示在最上層 比debug的頁面都高
  2. canvas display:none 可是沒法經過canvasToTemoFilePath導出圖片
  3. 父級寬高0，overflow:hidden 無效 ，canvas很霸道...

解決方案： 把canvas定位到了屏幕外

生成小程序分享卡片的圖片， canvas 繪製的用戶頭像不顯示？？

生成小程序分享卡片的圖片，這個地方有不少坑.... 坑。。。。 坑oooo

1. canvas 畫完圖後，使用canvasToTempFilePath 生成的圖片都是透明圖。

咱們都知道小程序分享卡片上的圖片，須要傳一個imageUrl參數，可是咱們須要將動態數據展現到圖片上，因此，就須要canvas畫圖生成一張圖片地址。

因此，ctx.draw() 以後，使用 wx.canvasToTempFilePath() 導出的圖片地址是透明的。

小程序文檔里加了一條bug,tips說明 canvasToTempFilePath

Bug & Tip
tip: 在 draw 回調裏調用該方法才能保證圖片導出成功。

因此應採用

ctx.draw(false, ()=>{
    wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: canvasW,
        height: canvasH,
        destWidth: canvasW,
        destHeight: canvasH,
        canvasId: 'myCanvas',
        success: (res)=> {
            // console.log(res.tempFilePath)
            this.sharePic = res.tempFilePath
        }, 
    })
});

2. 生成圖片路徑能夠了，可是生成的圖片，微信開發者工具能夠看到，可是手機上並不顯示

因爲小程序的 Canvas 沒法直接使用網絡圖片進行繪製，因此當咱們須要使用一個圖片資源時，應該先使用 wx.getImageInfo 去獲取該資源的臨時文件。

而後再把返回的臨時圖片地址，用做canvas繪圖的參數地址

3. canvas 繪製圓形頭像問題，（這個算是本身挖的坑，對canvas不太熟悉）

//設置頭像
ctx.save(); //保存以前的繪製環境
ctx.arc(transitionPX(133),transitionPX(511), headSize/2, 0, 2*Math.PI);  //參數必定要寫全，否則會致使手機顯示問題
ctx.clip(); //剪切某個區域， 使得後面繪製的都在 arc裏面
ctx.drawImage(avatarUrl, transitionPX(70), transitionPX(448), headSize, headSize);
ctx.restore()   //恢復以前的繪圖環境，否則之後繪製的都不顯示，相似 overflow:hidden效果

4. canvas生成的圖片分享後顯示很模糊

沒想到吧，哈哈哈哈，仍是有問題，一步一坑，挖一路填一路。

canvas畫圖是多大就是多大，可是手機的屏幕設備的像素比如今通常都是超過2的。因此咱們須要導出更大的圖片，就是基於之前寫的寬高，乘以手機像素便可

先用 getSystemInfo 獲取當前設備的分辨率 pixelRatio，而後再將以前導出的寬高 乘以 pixelRatio分享後圖片顯示就清楚不少啦

wx.canvasToTempFilePath({
    ...
    destWidth: canvasW*this.pixelRatio,
    destHeight: canvasH*this.pixelRatio,
    ... 
})

小程序跳轉小程序提示 該功能沒法使用 請返回使用該小程序其餘功能

我點擊小程序的一個按鈕跳轉到另外一個小程序，部分代碼以下，可是點擊後提示 該功能沒法使用 請返回使用該小程序其餘功能

<navigator target="miniProgram" app-id="abcdefg" path="/pages/xxx/index" hover-class="none">
    <div class="pay fl tac" @tap="to">
        付費學：￥199
    </div>
</navigator>

加上版本說明 version="release"

當target="miniProgram"時有效，要打開的小程序版本，有效值
develop（開發版），trial（體驗版），release（正式版），僅在當前小程序爲開發版或體驗版時此參數有效；若是當前小程序是正式版，則打開的小程序一定是正式版。

當你沒有要跳轉的小程序的體驗權限時，開發版本測試version="trial" 的時候，會提示你無改小程序體驗權限。
上線使用 version="release" 便可

小程序報錯 https://wx.qlogo.cn 不在如下 downloadFile 合法域名列表中，請參考文檔：

downloadFile 合法域名校驗出錯

https://wx.qlogo.cn 不在如下 downloadFile 合法域名列表中，請參考文檔： https://mp.weixin.qq.com/debu...

這個也是canvas畫圖， wx.getImageInfo 須要吧頭像轉成小程序的臨時文件 的時候出的問題。

關掉微信開發者工具，不校驗合法域名、web-view（業務域名）、TLS 版本以及 HTTPS 證書 就會出現這個問題。

真機還會出現 getImageInfo 錯誤...

解決方案：登陸小程序後臺管理。在 設置->開發設置->服務器域名 ，把剛剛報錯是域名添加進去，而後從新編譯一下代碼，從新運行就能夠了

小程序showModal內容如何左對齊

小程序文檔裏並無針對文本對齊方式的設置，因此設置多段文字的時候，採用 \r\n換行後，最後一行的文本都是居中狀態影響美觀，因此要對全部文本左對齊，辦法仍是有的，就是添加空格，做爲文本去填充內容。代碼以下

wx.showModal({
    title: '規則說明',
    content: `學習：課程爲闖關模式，學完一課，次日自動解鎖下一課，天天最多學習一節課哦~ \t\t\t\t\t\t\t\t\t\t\t \r\n打卡：完成當日學習後，將學習報告分享至寶媽羣，即爲打卡成功！僅當日分享有效哦~ \t\t\t\t\t\t\t\t\t\t\t \r\n連續打卡12天，便可免費領取神祕大獎 \t\t\t\t\t\t\t\t\t\t\t `,
    showCancel: false,
    confirmText: '知道啦',
    success: function(res) {
        if (res.confirm) {
            console.log('用戶點擊肯定')
        } else if (res.cancel) {
            console.log('用戶點擊取消')
        }
    }
})

注意一點： \t\t\t\t\t\t\t\t\t\t\t \r\n ，\t和\r\n之間要添加 空格，否則在安卓機會有換行換不了或者文本之間換行等顯示問題。

小程序點擊<navagator>組件在某些手機跳轉不起做用

navagator組件須要2.07以上基礎庫支持，因此當你的微信版本太低，所支持的基礎庫也就低，致使跳轉無效。

解決方案： 在微信公衆平臺設置->基本設置-> 基礎庫最低版本設置 ,設置線上最低版本庫爲組件所支持的最低版本。

已中止更新，小程序產品迭代較快，建議多看文檔，多去社區參考~
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程