使用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以上基础库支持，因此当你的微信版本太低，所支持的基础库也就低，致使跳转无效。

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

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