mpvue-小程序之蹲坑记 (2)

mpvue 组件名大写会提示,统一小写,警告信息如下:

mpvue-小程序之蹲坑记

4. 图片路径

微信小程序不支持本地引用背景图片(image 标签支持本地图片)、音频、视频,所以需要外链。对于图片还可以使用 Base64 编码,直接在 html 或 css 中引用

相对路径图片不显示
<img src="">

解决方案:

把路径 import 进来,或把图片放在 static 目录下

background-image

背景图在真机无法显示

解决方案

外链

base64 编码

background-image: url('转换后的编码') <!-- 如果多次引用可将其设为全局变量,在js文件引用 -->

使用 image 组件,去掉背景图(可以使用相对路径)

5. wx.request post 方法失败

wx.request post 方法参数传输失败

wx.request post 的 content-type 默认为 application/json
如果服务器没有用到 json 解析,可以更改 content-type 为 urlencoded

wx.request({ ... method: 'post', header: { 'content-type': 'application/x-www-form-urlencoded' }, ... })

6. 冷启动

小程序的机制,是在退出五分钟内进入,就会显示的是退出前的页面,如果你希望进入小程序都相当于冷启动的方式,直接进入主页面。你可以在page的onUnload里面里面set一个值,然后在app的onShow的时候判断这个值,然后决定是否跳到首页~

7. 录音管理相关 7.1 onPause

录音暂停事件

监听情况:

pause 事件--手动

不能监听:

自然播放结束

stop 事件--手动

7.2. 小程序实现语音流式识别

见博文-目前未更新: mp - Voice stream processing

8. 视频相关

--待续

9. 地图相关

地图上覆盖层——可实现
组件支持:

cover-view & cover-image

其他部分组件在开发工具上支持,真机上不显示

事件支持:

tap

touch

不支持 touchmove,touchend

不会冒泡到 map组件

工具相关 1. 开发工具 1.1. 调试与非调试模式

假如工具内开启不校验域名选项
此时,调试模式下,可以不校验域名问题;http或者不合规范的请求地址将被允许,比如带有端口的地址(正常情况下url是不允许带端口的)

mpvue-小程序之蹲坑记

主要用途:

使用本地服务

使用未配置的域名

使用非 https 域名

在域名不合规范时,使用必须appid才可以使用的部分调试

1.2. 真机预览问题

调试模式下可用,而非调试模式下不可用的情况:

检查下是否没有配置好合法域名

假如配置好了域名,排查https问题

request fail 问题排查

后台域名没有配置配置完毕请点击刷新按钮

重启开发者工具,检查配置信息是否更新

域名没有备案或或是备案后不足24小时;备案未生效

mpvue-小程序之蹲坑记

ssl 协议有问题

mpvue-小程序之蹲坑记

同时测试ios和安卓,假如有一方可以,一方不行,则是证书问题,请选用受认可的证书

其他可参考:https 解决方案

2. 第三方 UI 库

字体/第三方UI库引用不支持

@font-face { font-family: '字体名称'; src: url("../../resources/font/UKIJTuzTom.eot"); font-weight: normal; font-style: normal; }

微信小程序 @font-face 里 添加url地址没用, 所以 URL地址替换掉 base64 编吗实现

先外部字体准备好

网站里 上传字体,选择base64 编吗 ,fotmat后下载

下载包里有个 style文件 打开后 代码可以添加到WXSS里

mpvue-小程序之蹲坑记

3. wxcharts

基于canvas 绘制,体积小巧

由于微信小程序本身框架的限制,很难集成目前已有的图表工具,显示图表目前有两种方案:

服务器端渲染图表,输出图片,微信小程序中直接显示渲染好的图片

需要后台有一套渲染服务,并且有一定的网络开销

微信小程序API中提供了canvas的支持,利用canvas自行绘制图表

wxcharts 采用第二种方案
如何使用

直接引用编译好的文件 dist/wxcharts.js 或者 dist/wxcharts-min.js

自行编译

git clone https://github.com/xiaolin3303/wx-charts.git npm install rollup -g npm install rollup -c 或者 rollup --config rollup.config.prod.js

微信小程序图表工具

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpxgwy.html