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

This article mainly explains "how to develop Mini Program". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn how to develop Mini Program.

There is a lot of data in the data request hook, so I have created a lot of interfaces in easy mock to request data when the page needs it. If wx.request is used every time and there are asynchronous requests everywhere, there will be a lot of trouble in processing. Promise in es6 can turn asynchronism into synchronization (async and await in vue can also be used), encapsulating a request that can also be used in future development.

Encapsulated request

Function request (params) {return new Promise ((resolve, reject) = > {wx.request ({url: params.url, method: params.method | | 'get', data: params.data, header: {' content-type': 'application/json'}, success: resolve, error: err = > {console.log ("request error:" + err.errMsg) }})}} export default request "import request from'.. /.. / utils/request.js' needs to request data to be introduced into request.js to view page details

To check the details of the page is to pass the id you clicked on, but I encountered a pit here. When I was looking for the details of the id I clicked, I found that I could not match my data. Later, I printed step by step to find out which step there was a problem. I found that the data I created with easymock, the id passed was a string rather than a number, so I converted the id into numbers to match. Got the details page you want to click on.

GetActive (id) {const url = 'https://www.easy-mock.com/mock/5b06da4872643c7a5c4edcd1/api/desc#!method=get'; var params = {url: url, method:' GET',}; let position = []; let currentDesc = this.data.currentDesc; request (params) .then (res = > {/ / Asynchronous variable synchronization position = res.data.data.position }) .then (() = > {for (let I = 0; I)

< position.length; i++) { if (i === id) { let that = this; that.setData({ currentDesc: position[i] }) console.log(that.data.currentDesc) } } } ); }, onLoad: function (options) { let id = options.id - 0; //将id转化成number this.getActive(id); //请求数据匹配id },搜索 因为是用markdown造的假数据，数据不是很多，而且这不是像有后端的那样，可以传给后端参数，让后端给你提供符合的数据，所以还是得要自己干。刚开始实现时，第一时间想到的是用indexOf()去判断，如果不含有我输入的字符串，就返回-1，通过这点去判断。写这个只要知道大概的想法，一般是不怎么会出错的。 onInput(e) { let value = e.detail.value; // console.log(value); const job = this.data.job;//匹配的数组 var list = []; for(var i = 0; i < job.length; i++){ if(job[i].indexOf(value)>

-1) {/ / return-1 list.push (value [I]);}} this.setData ({list: list, ['search.content']: value}) if not included;}

I used to have a small bug in this part. When the page comes back from the next page, the search record will become a history record, and the search value will also be on the input, but the same list will also be displayed below, which will cause a user experience and not good. So I give the whole search matching list a ternary operator, set it to false before clicking on the jump, and then the list will be hidden. That doesn't happen when you return from the next page.

{{item}} positionSearch (e) {/ / console.log (e) let list = this.data.list let index = e.currentTarget.dataset.index; let value = list [index]; let history = this.data.history; history.push (value) / / put the search records into the history search this.setData ({['search.content']: value, history, isShowLists: true / / hide lists}) wx.navigateTo ({url: `. / related/related?value=$ {value}`,})}, problems encountered by scroll-view

Do not use textarea, map, canvas, video in scroll-view

Scroll-into-view takes precedence over scroll-view

Scroll-view needs to give scroll-view a fixed width or height, set the property scroll-x or scroll-y, and set the style white-space:nowrap; (this is very important, without setting this style, you cannot achieve the effect of scroll-view

If you want to drop down and refresh, use the method that comes with the scroll-view component. Scrolling in scroll-view will not trigger the onPullDownRefresh event.

The page returns the value

When you jump to a page, you can pass parameters on url through navigateTo, but when you return to the original page, you have to change the method of passing parameters. One is to set golbaldata in app.js, and then set golbaldata where you want to pass the value, or you can store the data in stroage. Another is getCurrentPages (). The getCurrentPages () function is used to get an instance of the current page stack, which is given in the order of the stack in the form of an array. The first element is the front page and the last element is the current page.

Do not try to modify the page stack, which will result in routing and page state errors.

Changecity (e) {var value = e.target.dataset.value; var pages = getCurrentPages (); var currPage = pages [pages.length-1]; / / current page var prevPage = pages [pages.length-2]; / / previous page prePage.setData ({location: value, city: value}); wx.navigateBack ({delta: 1})}, edit resume

Using weui to write WeChat Mini Programs saves us part of our time. There is also a need to pass the value back to this function. I am here to pass the parameters into the stroage because I want to implement it in a different way. In the personal information, there is a form validation, here, except for a big loss. Paste the code first and take a look at the form I wrote.

Real name, gender, please select {{arraySex.sex [arraySex.index]}} birth date {{date}} highest educational background, please select {{arrayEducation.education [arrayEducation.index]}} work experience, please select {{arrayExperience.experience [arrayExperience.index]}} mobile phone number To contact the city where the mailbox is located, please select {{city}} to introduce yourself {{num}} / 60 save formSubmit (e) {/ / verify whether to enter the name let nameVal = this.data.nameVal If (! this.errorInput (nameVal, 'Please enter your name') {return false;}; console.log (nameVal) / / verify whether to select a gender let sex = this.data.arraySex.sex [this.data.arraySex.index]; if (! this.error (this.data.arraySex.isPickSelect, 'Please choose your gender')) {return false;} Console.log (sex) / / verify whether the birth date is let date = this.data.date; if (date = = '1999-01-01') {w so far, I believe you have a better understanding of "how to develop Mini Program", you might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.