使用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，或者使用标签

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

小程序横向滚动定位到指定位置问题

自己一开始用css的overflow-x:auto,可以实现滚动，但是却不能用原生js,document.getElementById['a'].scrollLeft 去设置滚动距离了

然后使用看了下文档，发现有 scroll-view 组件，直接拿来用，用文档的scroll-left定位写法发现怎么也不能定位到特定位置

然后搜了一圈是发现自己的样式写的有问题，必须用下面的写法。。。

小程序分享报错 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页面！！！


    ....

完美~~~

隐藏canvas的情况下不能导出图片？

现在需要做一个图片处理的功能但是又不需要canvas显示在页面上，

我尝试了很多隐藏的方法结果都是两种：

canvas始终显示而且显示在最上层比debug的页面都高
canvas display:none 但是无法通过canvasToTemoFilePath导出图片
父级宽高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,
    ... 
})

小程序跳转小程序提示该功能无法使用请返回使用该小程序其他功能

我点击小程序的一个按钮跳转到另一个小程序，部分代码如下，但是点击后提示该功能无法使用请返回使用该小程序其他功能



    
        付费学：￥199

加上版本说明 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组件需要2.07以上基础库支持，所以当你的微信版本过低，所支持的基础库也就低，导致跳转无效。

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

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

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