Summary of Forty Technical Tips for WeChat Mini Program Development

This article mainly introduces to you relevant information on forty technical tips for the development of WeChat mini programs. I believe it has certain reference value for everyone to learn or use WeChat mini programs, so it is especially recommended to everyone if you need it. Friends can come and see it together.

Preface

WeChat’s “mini program” has been officially launched for a week, and related topics continue to heat up. The news of Alipay's development of "mini programs" was immediately exposed, and Internet giants were gearing up. Many netizens joked that this momentum would challenge the existing "APP empire." Well, in the face of such a hot mini program, WeX5 Mobile Development Cloud has not been idle. After searching the entire Internet, we have selected a must-read article for mini program developers, covering 40 technologies that need to be paid attention to in practical mini program development. Click here for your reference!

Q: Why can’t objects such as window be used in scripts?

A: The script logic of the page is run in JsCore, which has no window object. environment, so window cannot be used in scripts, nor components can be operated in scripts

Q: Why zepto/jquery cannot be used

A :zepto/jquery will use the window object and document object, so it cannot be used.

Q:wx.navigateTo cannot open the page

A: An application can only open 5 pages at the same time. When 5 pages are already open, After the page, wx.navigateTo cannot open the new page normally. Please avoid multi-level interactions, or use wx.redirectTo

Q: The style sheet does not support cascading selectors

A:WXSS supports class selectors starting with .

Q: Local resources cannot be obtained through css

A: background-image: You can use network images, or base64, or use tag

Q: How to modify the background color of the window

A: Use the page tag selector , you can modify the style of the top node

page { 
  display: block; 
  min-height: 100%; 
  background-color: red;
}

Q: Why the upload failed

A: In order To improve the smoothness of the experience, the size of the compiled code package must be less than 1MB. Code packages larger than 1MB will fail to be uploaded.

Q: HTTPS request unsuccessful

A: tls only supports version 1.2 and above

Q: Referer for network requests

A: Referer for network requests cannot be set, and the format is fixed at https://servicewechat.com/{appid}/{version}/ page-frame.html, where {appid} is the appid of the mini program, {version} is the version number of the mini program, and a version number of 0 is represented as beta version.

Q: Page.data cannot be directly manipulated

A: Avoid directly assigning and modifying Page.data , please use Page.setData to synchronize the data to the page for rendering. How to obtain user input

To obtain the component of user input, you need to use the bindchange attribute of the component to The user's input content is synchronized to AppService.

<input id="myInput" bindchange="bindChange" /><checkbox id="myCheckbox" bindchange="bindChange" />
var inputContent = {}
 
Page({
 data: {
 inputContent: {}
 },
 bindChange: function(e) {
 inputContent[e.currentTarget.id] = e.detail.value
 }
})

Q: Does the WeChat applet support fetch or promise?

A: The promise tool currently Not supported, the fetch client does not support the tool to remain unified in the next version.

Q: The currentTarget.id value in the touchmove sliding event does not change.

A: The target / currentTarget of the touchmove / touchend event will always be the target / currentTarget of touchstart.

Q: The parameter transmission server of the POST method of wx.request cannot receive the bug.

A: The content-type of wx.request post defaults to 'application/json '

If the server does not use json To explain, you can set content-type back to urlencoded.

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

Q: wx.uploadFile returns http code 403 on the mobile phone.

A: WeChat for Android is upgraded to version 6.5.2 or above.

Q: Does the mini program support SVG?

A: The src of the image can be placed in the remote svg, background-image can also be used.

Q: The statusCode returned by wx.request is inconsistent in type at both ends.

A: This problem does exist and will be fixed in a later version.

Q: About the dynamic generation and destruction of components?

A: Dynamically generated components are not supported, but you can use wx:for to render multiple components.

Q: Does the mini program support hot updates?

A: Developers’ own replacement is not supported.

Q: The callbacks of some interfaces are inconsistent between iOS and Android. For example, in the payment interface, after the user cancels the payment, iOS only calls back the complete method, and Android calls back the fail method. There is no callback in the official document. It shows that it is very difficult to develop; similarly there are image selection interfaces, sharing interfaces, etc.

A：支付接口，用户取消支付后，ios只回调complete方法，android则回调fail方法，问题已记录，多谢反馈。

Q：如果icon已经在服务器上了，想用直接访问网址的方法加载图片进来这样可以吗？

A：不能。

Q：ipad不能使用小程序？

A：暂时不支持ipad打开小程序。

Q：小程序音频，视频播放器问题 。1、能够只隐藏进度条跟时间吗？2、现在iOS平台上的时间显示是0:00，但是android上会显示错误码，能够通过什么设置修改吗？

A：1：下个版本会修改这里的交互，不显示进度条和时间。2：6.5.3 版本已修复此问题。

Q：拍照窗口可以加浮层吗？

A：暂时不支持。

Q：开发者工具经常报jsEngineScriptError错误，会导致页面白屏。

A：移步下载最新 0.12.130400 版本的开发工具试试

Q：开发者工具里面，SPA页面，更改title无效。

A：wx.setNavigationBarTitle可以通过 API 改变导航栏标题。

Q：请问小程序页内支持长按保存图片或分享图片吗？

A：目前没有这个功能。

Q：关于swiper中的current问题。如果在新的版本中，直接设current,会产生的效果是：无论从哪个swiper元素点击进去，都会显示swiper第一个子元素的值。

A：目前swiper在处理swiper-item动态变化的情况时有一些bug，会很快修复的。

Q：小程序能引用自己服务器上的wxss和js文件吗？

A：不能，无法执行远程代码。

Q：苹果7，提示内部错误，内存占用过多。

A：页面做的预加载，列表中有图片，图片渲染的太多了，解决办法就是不当屏展示的图片，不让它渲染。

Q：小程序体验者安卓卡在加载页面进不去，IOS可以进去。

A：这是android微信客户端旧版本的bug， 请下载最新版本的 6.5.3 客户端。

Q：请问目前微信小程序支持蓝牙吗？

A：目前不支持。

Q：分享功能真机没有效果？

A：这是android微信客户端旧版本的bug， 请下载最新版本的 6.5.3 客户端。

Q：强制使用https，开发和测试环境下怎么联调和测试？

A：「微信web开发者工具」->「项目」->「开发环境不校验请求域名及TLS版本」。

Q：wx.showToast()方法无效。

调用wx.request请求网络然后在

complete: function (res) {
 
// complete
wx.hideToast();
}

在成功方法里面如果要进行showToast的时候感觉无效，并没有弹出提示框。

A：success 回调调用是在 complete 之前的，如果在 success showToast，下一步 complete hideToast 就会被冲掉 showToast。

Q：picker 组件中的文字大小是否支持修改？

A：不支持修改。

Q：tabBar的图片在android和ios上面大小差异太大。

A：这是android微信客户端旧版本的bug， 请下载最新版本的 6.5.3 客户端

Q：tabbar 页面返回问题。非首页的tabbar 页面 点击左上角返回箭头时如何返回到小程序首页？ 现在是直接退出小程序了

A：创建新页面时用 navigateTo 才会新建新页面，同时保留旧页面，如果用 redirectTo 是在当前页面内跳转。

Q：问下 wx.request() 怎么设置成同步。

A：reqeust是发起网络请求。没有同步接口。

Q：最新mac版工具不可用，进来就出现获取appservice 失败。

A：工具设置中选择直接链接网络 。或者 系统中的代理软件设置工具直接链接网络。

Q：真机 view overflow-y下滑会很卡。

A：父层需要 position:relative; 加了之后就不卡了。

总结

The above is the detailed content of Summary of Forty Technical Tips for WeChat Mini Program Development. For more information, please follow other related articles on the PHP Chinese website!