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只回調(diào)complete方法，android則回調(diào)fail方法，問題已記錄，多謝反饋。

Q：如果icon已經(jīng)在服務(wù)器上了，想用直接訪問網(wǎng)址的方法加載圖片進(jìn)來這樣可以嗎？

A：不能。

Q：ipad不能使用小程序？

A：暫時(shí)不支持ipad打開小程序。

Q：小程序音頻，視頻播放器問題 。1、能夠只隱藏進(jìn)度條跟時(shí)間嗎？2、現(xiàn)在iOS平臺上的時(shí)間顯示是0:00，但是android上會顯示錯(cuò)誤碼，能夠通過什么設(shè)置修改嗎？

A：1：下個(gè)版本會修改這里的交互，不顯示進(jìn)度條和時(shí)間。2：6.5.3 版本已修復(fù)此問題。

Q：拍照窗口可以加浮層嗎？

A：暫時(shí)不支持。

Q：開發(fā)者工具經(jīng)常報(bào)jsEngineScriptError錯(cuò)誤，會導(dǎo)致頁面白屏。

A：移步下載最新 0.12.130400 版本的開發(fā)工具試試

Q：開發(fā)者工具里面，SPA頁面，更改title無效。

A：wx.setNavigationBarTitle可以通過 API 改變導(dǎo)航欄標(biāo)題。

Q：請問小程序頁內(nèi)支持長按保存圖片或分享圖片嗎？

A：目前沒有這個(gè)功能。

Q：關(guān)于swiper中的current問題。如果在新的版本中，直接設(shè)current,會產(chǎn)生的效果是：無論從哪個(gè)swiper元素點(diǎn)擊進(jìn)去，都會顯示swiper第一個(gè)子元素的值。

A：目前swiper在處理swiper-item動(dòng)態(tài)變化的情況時(shí)有一些bug，會很快修復(fù)的。

Q：小程序能引用自己服務(wù)器上的wxss和js文件嗎？

A：不能，無法執(zhí)行遠(yuǎn)程代碼。

Q：蘋果7，提示內(nèi)部錯(cuò)誤，內(nèi)存占用過多。

A：頁面做的預(yù)加載，列表中有圖片，圖片渲染的太多了，解決辦法就是不當(dāng)屏展示的圖片，不讓它渲染。

Q：小程序體驗(yàn)者安卓卡在加載頁面進(jìn)不去，IOS可以進(jìn)去。

A：這是android微信客戶端舊版本的bug， 請下載最新版本的 6.5.3 客戶端。

Q：請問目前微信小程序支持藍(lán)牙嗎？

A：目前不支持。

Q：分享功能真機(jī)沒有效果？

A：這是android微信客戶端舊版本的bug， 請下載最新版本的 6.5.3 客戶端。

Q：強(qiáng)制使用https，開發(fā)和測試環(huán)境下怎么聯(lián)調(diào)和測試？

A：「微信web開發(fā)者工具」->「項(xiàng)目」->「開發(fā)環(huán)境不校驗(yàn)請求域名及TLS版本」。

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

調(diào)用wx.request請求網(wǎng)絡(luò)然后在

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

在成功方法里面如果要進(jìn)行showToast的時(shí)候感覺無效，并沒有彈出提示框。

A：success 回調(diào)調(diào)用是在 complete 之前的，如果在 success showToast，下一步 complete hideToast 就會被沖掉 showToast。

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

A：不支持修改。

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

A：這是android微信客戶端舊版本的bug， 請下載最新版本的 6.5.3 客戶端

Q：tabbar 頁面返回問題。非首頁的tabbar 頁面 點(diǎn)擊左上角返回箭頭時(shí)如何返回到小程序首頁？ 現(xiàn)在是直接退出小程序了

A：創(chuàng)建新頁面時(shí)用 navigateTo 才會新建新頁面，同時(shí)保留舊頁面，如果用 redirectTo 是在當(dāng)前頁面內(nèi)跳轉(zhuǎn)。

Q：問下 wx.request() 怎么設(shè)置成同步。

A：reqeust是發(fā)起網(wǎng)絡(luò)請求。沒有同步接口。

Q：最新mac版工具不可用，進(jìn)來就出現(xiàn)獲取appservice 失敗。

A：工具設(shè)置中選擇直接鏈接網(wǎng)絡(luò) 。或者 系統(tǒng)中的代理軟件設(shè)置工具直接鏈接網(wǎng)絡(luò)。

Q：真機(jī) view overflow-y下滑會很卡。

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

總結(jié)

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!