微信小程序(weixinxiaochengxu), 简称小程序, 缩写 XCX, 英文名 mini program, 是一种不需要下载安装即可使用的应用, 它实现了应用触手可及的梦想, 用户扫一扫或搜一下即可打开应用
这篇文章主要介绍了微信小程序 开发中遇到问题总结的相关资料, 需要的朋友可以参考下
微信小程序 开发中遇到问题总结
1. 由于小程序 wx.request()方法是异步的, 在 app.js 执行 ajax 后, 各分页加载 app.js 的全局数据时, 无法按顺序加载例:
- //app.js
- App({
- ajax: function() {
- let that = this;
- wx.request({
- url: 'https://a.com/url.php',
- method: 'GET',
- success: function(e) {
- that.data = 123;
- }
- })
- };
- })
- //content.js
- let app = getApp() Page({
- getData: function() {;
- app.ajax();
- console.log(app.data); //undefined
- }
- })
解决方法, 使用 Promise 异步函数:
- //app.js
- App({
- ajax: function() {
- let that = this;
- let promise = new Promise(function(resolve, reject) {
- wx.request({
- url: 'https://a.com/url.php',
- method: 'GET',
- success: function(e) {
- that.data = 123;
- resolve();
- }
- })
- });
- };
- })
- //content.js
- let app = getApp() Page({
- getData: function() {;
- app.ajax().then(() = >{
- console.log(app.data); //123
- });
- }
- })
2. 图片只能获取原始宽高, 无法获取现有宽高不过 image 标签封装了 mode 属性, 可以根据需求自行设置
3. 每个 image 标签底部有一条透明间隔, 非 padding, 非 margin 在图片前面做遮罩层时可能会被坑
4. 网络请求必须部署 https
5. 配置 tabBar 时, list 参数中的 pagePath 参数至少需要包含 app.json 里 pages 数组中的第一个路径, 否则会导致 tabBar 不显示
6.tabBar 跳转时无法带参数, 解决方法:
- //search.js
- var app = getApp();
- Page({
- confirm: function(e) {
- // 获取数据, 添加到全局
- let val = e.detail.value;
- app.searchWord = val;
- this.jump();
- },
- jump: function() {
- // 跳转 tabBar
- wx.switchTab({
- url: '../index/index',
- });
- },
- });
- //index.js
- var app = getApp();
- Page({
- onShow: function(e) {
- // 获取全局数据
- let val = app.searchWord;
- }
- });
- // 需要传递参数的页面在跳转前将数据添加到 app.js 里需要接受参数的页面在 onShow 方法接受之前添加到 app.js 的数据
7. 小程序 wx.request()方法请求的 url 必须是 https 开头
8.wx.request()使用 post 方法请求时, 还需要加上 header,header[content-type]值为 application/x-www-form-urlencoded 例:
- wx.request({
- url: 'https://a.com/url.php',
- data: {message: 123},
- method: 'POST',
- header: {
- 'content-type': 'application/x-www-form-urlencoded'
- },
- success: function(e){
- console.log(e)
- }
- });
9. 小程序无法加载 html 标签, 同时数据渲染也无法渲染 wxml 标签(<view></view > 等), 可以使用 wxParse.js 来处理相关数据
10. 安卓无法渲染 wx.request()请求的数据
检测返回的数据是否有 BOM 头 (3 个字符的空白) 安卓的 wx.request 解析不会跳过 BOM 头, 导致数据返回的是字符串, 而不是对象或者数组
例:
返回的数据是:(3 个字符的空白){a:1, b:2}
解析的数据是:'{a:1, b:2}'(字符串), 而不是{a:1, b:2}(对象)
由于不是对象, 模板渲染之类会无法正常进行解决方法, 后台返回数据前去掉 BOM 头就行如果后台不会去 BOM 头, 可以在前端去除, 但是 wx.request 如果 dataType 缺省, 会默认为 json 并自动解析, 导致无法去除 BOM 头
解决方案:
- wx.request({
- url: url,
- method: 'GET',
- dataType: 'txt',
- success: function(e) {
- let json = e.data.trim();
- let arr = JSON.parse(json);
- }
- });
dataType 改为 json 以外的格式, 避免小程序自动解析 json 字符串, 然后对返回的数据用 trim() 方法去掉空白, 最后解析 json 字符串就行
11. 调试时多行省略 (-webkit-line-clamp) 正常, 发布时多行省略无效
解决方案: 如果不想重新审核, 让后台截断就好
来源: http://www.phperz.com/article/18/0218/358474.html