使用mpvue开发 微信小程序，以及小程序开发踩过的坑

使用mpvue开发小程序---Vuex（store）的支持

mpvue提供了vue的语法编译为小程序的能力，但是还是有些局限，不过能做到跟vue差不多已经很不错了。

我在项目中按照vue初始化 store 的时候，本以为能像vue里正常使用vuex的一些功能，发现报错 TypeError: Cannot read property 'state' of undefined，一下子懵逼了，在pages的页面里打印 this对象，发现并没 $store属性，也就是说mpvue对store并没有初始化成功，苦瓜脸...

百度中... 不负有心人~~~

原因如下：

mpvue使用上，vuex和以往类似，不同的是，小程序以多页形式渲染，故每个页面都需要创建vue实例并引入相应的store模块，入口配置大概如下：

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();

注意：是每个页面都要初始化渲染... （很麻烦的感觉）

亲测可用，终于可以起飞了~~~

小程序转发实现

分享的页面如果需要参数就一定要传参，并且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获取

测试分享，分享出去的页面缓存严重？

我转发后，去转发的手机点开，感觉总是没有变化，不管怎么改，改来改去，改去改来，还是上一次的数据或者返回结果。多次测试才知道，转发后的页面，也需要先扫一下微信开发者工具，更新到最新代码才可以。（现在的小程序已经有分享提示了，提示要求保证要分享的手机也是最新的开发代码）

小程序点击一次，生成多个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以上基础库支持，所以当你的微信版本过低，所支持的基础库也就低，导致跳转无效。

解决方案： 在微信公众平台设置->基本设置-> 基础库最低版本设置 ,设置线上最低版本库为组件所支持的最低版本。

---

已停止更新，小程序产品迭代较快，建议多看文档，多去社区参考~