使用mpvue开发小程序遇到的问题

[lulusir]

开发问题记录

使用mpvue框架开发小程序遇到的一些问题

1.引入字体错误

1. 字体文件只用tff和woff两种格式，选择一种，然后通过urlloader转base64就可以引入了。

分享

1. 页面内调起分享要使用组件

<button open-type="share">share</button>

2. 1. 分享到群之前要调用wx.showShareMenu方法，参数withShareTicket: true；
   2. 在App.onShow方法中获取options.shareTicket，传入到wx.getShareInfo中去获取群信息；群名称则通过open-data获取
   3. onLoad函数可以获取url里面的query参数

3. 在微信开发工具可以设置分享编译，用于测试

button组件

1. 去除button组件默认的边框

.button::after {
   border: none; 
}

canvas

小程序画头像的时候要配置域名，将 https://wx.qlogo.cn 配置到安全域名内

画圆形头像用arc方法

ctx.save()
ctx.beginPath()
ctx.arc(1.3333 * vw, 9.3333 * vw, 0.8 * vw, 0, 2 * Math.PI)
ctx.setFillStyle('#EEEEEE')
ctx.fill()
ctx.clip()
ctx.drawImage(avatarUrl, 0.5333 * vw, 8.5333 * vw, 1.6 * vw, 1.6 * vw)
ctx.restore()

如果图片地址错误的话，画图会出错，所以要先判断

// 画出封面图和白色底板
if (cover) {
ctx.drawImage(cover, 0, 0, 9.1467 * vw, 8 * vw)
}

image

1. 图片自适应，使用mode：widthFix
   widthFix：宽度不变，高度自动变化，保持原图宽高比不变。

页面生命周期

1. 获取和设置url参数放在onLoad()

   onLoad (options) {
   // handle options
   }

2. 通过参数初始化页面放在onShow(), 因为返回按钮直会触发onShow, 而且onShow在onLoad之后触发

   onShow(){
   this.init()
   }

   路由

3. 页面重定向 当前页面出栈，新页面入栈
4. 重加载 页面全部出栈，只留下新的页面

   video

   <!-- v-show不能直接加在 video 标签上，需要加在在外层 -->
   <div v-show="playing">
   <video
   class="demo-video"
   :direction="Number(90)"
   id="myVideo"
   :src="src"
   @fullscreenchange="fullscreenchange"
   ></video>
   </div>

   canvas层级问题

   需要覆盖canvas组件需要用cover-image组件
   cover-image需要放在canvas后面，src不能用base64

   
   <canvas
   canvas-id="myCanvas"
   class="canvas"/>
   <cover-image class="close-btn" :src="'/static/images/WechatIMG87.png'" @click="$emit('clickPoster')" />