Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail the "uni-app generation WeChat Mini Programs error report how to solve", the content is detailed, the steps are clear, and the details are handled properly. I hope that this "uni-app generation WeChat Mini Programs error report how to solve" article can help you solve your doubts, following the editor's ideas slowly in depth, together to learn new knowledge.

1. Do not allow id selector

This problem is the easiest to find. It is common to tag tags with id in H6 pages, and then use # + id to set the style of tags in css, but the id selector cannot be used in WeChat Mini Programs, which can be easily found in the warning content.

It can also be seen from the warning that the Mini Program bid-winning signature and attribute name selector cannot be used.

two。 Default vertical arrangement

On the H5 page, the elements are arranged horizontally by default, but in Mini Program, the elements are arranged vertically by default, so it's best to explicitly set the elements horizontally and vertically so that page confusion does not occur.

.row-arrange {flex-direction: row; / * horizontal elements * /} 3. The picture cannot be loaded.

In fact, this reason is written in the documents on the official website, but I didn't read it carefully.

And you can load normally with a relative path in H5, but not in Mini Program, so it's best to use an absolute path.

.. / static/xxx.jpg # relative path / static/xxx.jpg # absolute path 4.eval function is not available

When writing H5, it is always customary to use eval (string) to get numbers, JavaScript objects, etc., but these conversions will report errors on WeChat Mini Programs, so the best way is to use the corresponding conversion API, for example, numbers can be parseInt, JSON objects can be JSON.parse, and so on.

5.getStorage async

On the H5 page, you can get the stored data by writing:

Var data;uni.getStorage ({title: 'xxx', success: function (res) {data = res.data;}}) this.data = data

But in Mini Program, this code will make an error. I guess it is a little slow to read the stored data in Mini Program, and the way I write it above is not standard, so I should strictly write it this way so that it won't make an error:

Var vm = this;uni.getStorage ({title: 'xxx', success: function (res) {vm.data = res.data;}}) the value in 6.props cannot be modified props: {questions: {type: Array, default: []},}

As shown above, I started by directly using the data in questions to dynamically render the page through v-for. In this way, the value of questions can be set directly from the properties of the tag, which will be very convenient, even if a new element H5 page is added to it later using this.questions.push (x). However, there is no response on WeChat Mini Programs. No matter how it is modified, it cannot be rendered dynamically, so I added a data source for ques rendering in data:

Data () {return {ques: [],};}, props: {questions: {type: Array, default: []},}, created: function () {... This.ques = this.questions;}

Then you only need to render with the data in ques. If you want to add elements, you can also do so by modifying ques, such as this.ques.push (x).

7.wx.uploadFile carries string parameters

When uploading files, according to the official documents of Wechat, the string parameters in the form format can not always be submitted successfully. One solution is to divide the uploaded file and the uploaded string into two APIs, but since my uploaded file contains token for permission verification, I must bring token along with the uploaded file, so I finally solved this problem by stitching addresses:

Wx.uploadFile ({url: vm.fileurl +'/ file/uploadPic?token=' + tokenJson ['token'] +' & userId=' + tokenJson ['userId'], / / Image File upload API filePath: vm.src, name:' pic', / / header: {'Content-Type':' multipart/form-data',} FormData: {method: 'POST' / / request method}, success (res) {...}}) undefined appears in the selection box in the multiSelector mode of 8.picker

Show the effect of the error:

You can see that all the options are undefined.

This is because my initial data uses a normal array, with each column being a string or an array of numbers, for example, [[1pd2d3], [1p2d3], [lmi2d3]]. There is no problem doing this on the H5 page, but errors will occur in Mini Program, so each column must use an array of objects, such as a very simple solution:

First of all, you need to use an array of objects to write data.

Data () {return {area: [[{'name':' Beijing'}, {'name':' Hebei'}], [{'name':' Xingtai'}, {'name':' Shijiazhuang'}], [{'name':' does not know the county'}]], areaIndex: [1d0d0],}}

Then use the following method in the tag:

{{area [0] [areaIndex [0]] .name}} {{area [1] [areaIndex [1]] .name}} {{area [2] [areaIndex [2]] .name}}

Note that the range-key here cannot be coloned, and the value in it should be the key in the object array.

After reading this, the article "how to solve the error report of WeChat Mini Programs generated by uni-app" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.