40 technical tips for mini program development, pure practical information

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. JsCore is an environment without window objects, so Window cannot be used in scripts, nor can components 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. After 5 pages have been opened, wx.navigateTo cannot open a new page normally. Please avoid multi-level interactions, or use wx.redirectTo

Q: The style sheet does not support cascading selectors

A: WXSS supports classes starting with . Selector.

Q: Local resources cannot be obtained through css

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

Q: How to modify the background color of the window

A: Use page Label selector, you can modify the style of the top-level node

page {

       display: block;

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

, and the code package larger than 1MB will fail to be uploaded.

Q：HTTPS

request was unsuccessful

A：tls

only supported

1.2 and above version

Q: Network request

referer

A : The

referer

of the network request cannot be set, and the format is fixed to 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 the version number of 0 indicates the development version.

Q: Cannot directly operate

Page.data

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 a component that can obtain user input, you need to use the bindchange attribute of the component to synchronize the user's input content to

AppService.

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 does not currently support it, and the fetch

client does not support the tool and will 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 couchmove / touchend event will always be the target / currentTarget of the touchstart event.

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 have it If json is used 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, and it can also be placed in the background-image.

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: Developer 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 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: Payment interface. After the user cancels payment, ios only calls back the complete method, and android calls back the fail method. The problem has been recorded. Thank you for your feedback.

Q: If the icon is already on the server, is it possible to load the image by directly accessing the URL?

A: No.

Q: Can’t I use mini programs on iPad?

A: Currently, iPad is not supported for opening small programs.

Q: Mini program audio and video player issues. 1. Can you hide only the progress bar and time? 2. The time display on the iOS platform is 0:00, but an error code is displayed on the Android platform. Can it be modified through any settings?

A: 1: The interaction here will be modified in the next version and the progress bar and time will not be displayed. 2: This problem has been fixed in version 6.5.3.

Q: Can a floating layer be added to the photo window?

A: Not supported at the moment.

Q: Developer tools often report jsEngineScriptError errors, which can lead to a white screen on the page.

A: Download the latest 0.12.130400 version of the development tools to try

Q: Developer tools Inside, on the SPA page, changing the title has no effect.

A: wx.setNavigationBarTitle can change the navigation bar title through API.

Q: Does the mini program page support long press to save pictures or share pictures?

A: Currently there is no such function.

Q: Regarding the current issues in swiper. If you set current directly in the new version, the effect will be: no matter which swiper element is clicked from, the value of the first child element of the swiper will be displayed.

A: Currently, swiper has some bugs in handling dynamic changes of swiper-item, which will be fixed soon.

Q: Can the mini program reference wxss and js files on its own server?

A: No, remote code cannot be executed.

Q: Apple 7 prompts an internal error and consumes too much memory.

A: The page is preloaded and there are pictures in the list. Too many pictures are rendered. The solution is to not display the pictures on the screen and prevent them from being rendered.

Q: Mini program experiencer Android is stuck on the loading page and cannot enter, but IOS can enter.

A: This is a bug in the old version of the android WeChat client. Please download the latest version of the 6.5.3 client.

Q: Does the WeChat applet currently support Bluetooth?

A: Currently not supported.

Q: The sharing function does not work on real devices?

A: This is a bug in the old version of the android WeChat client. Please download the latest version of the 6.5.3 client.

Q: It is mandatory to use https. How to jointly debug and test it in the development and test environments?

A: "WeChat Web Developer Tools"->"Project"->"The development environment does not verify the requested domain name and TLS version."

Q: The wx.showToast() method is invalid.

Call wx.request to request the network and then

complete: function (res) {

// complete

wx. hideToast();

}

In the success method, if you want to perform showToast, it feels invalid and no prompt box pops up.

A: success The callback call is before complete. If it is success showToast, the next step complete hideToast will be flushed showToast .

Q: Does the text size in the picker component support modification?

A: Modification is not supported.

Q: The size of the tabBar image is too different between Android and iOS.

A: This is a bug in the old version of the android WeChat client, please download the latest version 6.5.3 Client

##Q: tabbar

Page return problem. How to return to the mini program homepage when clicking the return arrow in the upper left corner of a tabbar page other than the homepage? Now it is time to exit the mini program directly

A: When creating a new page, use

navigateTo to create a new page while retaining the old page. If you use redirectTo is to jump within the current page.

Q: How to set

wx.request() to synchronization.

A: reqeust is to initiate a network request. There is no sync interface.

Q: The latest mac version of the tool is not available, and a failure to obtain appservice

appears when entering.

A: Select direct link network in tool settings. Or the proxy software setting tool in the system directly connects to the network.

Q: Real machine

The view overflow-y will be very stuck when sliding down.

A: The parent layer requires

position: relative; After adding it, it will not get stuck.

The above is the main content of sharing. It should be reminded that the mini program itself is still being continuously adjusted, modified and improved. Bugs discovered one after another will , also need to be repaired accordingly. Friends who care about mini program development please follow us to get the latest mini program development tips.

For more 40 technical tips on small program development, please pay attention to the PHP Chinese website for pure dry goods related articles!