WeChat Mini Program Data Access Example Detailed Explanation

高洛峰
Release: 2017-01-09 10:57:07
Original
1786 people have browsed it

Let me briefly talk about the structure of the mini program.

微信小程序 数据访问实例详解

as the picture shows

1. Each view (.wxml) only needs to add the script (.js) and style (.wxss) with the corresponding name. No references are needed. The scripts and styles under the page are inherited from the outermost app.js , app.wxcss

2. The script is a .js file. It has a fixed format: page, which is used to obtain data.

3. Utils is used to place data interfaces

Data access, if you know a bit about ajax, it won't be a problem, there's nothing to talk about

WeChat applet, because the IDE is too bad, if the code is written to be difficult to read, the entire project will be difficult to maintain.

Because I have never written an app, I don’t know how data access is encapsulated in the app.

As a small program coder with 3 days of work experience, I feel that if the data on each page has to be accessed by myself through the data interface, it would be very un-OOP.

Then I thought of linq to sql, and only used two of them. I originally planned to use singelordefault and firstordefault, but it was troublesome to think about it, so I used getbyparams and getbyid to find all the data based on the conditions, or get a piece of data based on the id.

Let’s just look at the method, it’s a bit long-winded.

const API_URL = 'http://localhost:4424/api/'
 
function getApi(url,params){
 return new Promise((res,rej)=>{
  wx.request({
   url:API_URL+'/'+url,
   data:Object.assign({},params),
   header:{'Content-Type': 'application/json'},
   success:res,
   fail:rej
  })
 })
}
 
module.exports = {
 GetByParams(url,page=1,pageSize=20,search = ''){
  const params = { start: (page - 1) * pageSize, pageSize: pageSize }
  return getApi(url, search ? Object.assign(params, { q: search }) : params)
   .then(res => res.data)
 },
 GetById(url,id){
  return getApi(url, id)
   .then(res => res.data)
 }
}
Copy after login

module.exports = {} is a fixed writing method, in which methods are written one by one, and each method is separated by,.

I set a url parameter because it is impossible to put all interfaces in a conntroller, so the format of the url is "conntroller/action"

Let’s look at a chestnut call and you’ll understand how to use it.

const req = require('../../utils/util.js')
 
Page({
 data: {
  imgUrls: [],
  indicatorDots: true,
  autoplay: true,
  interval: 2000,
  duration: 2000
 },
 onLoad(){
  req.GetByParams('home/homebanner')//看这里  看这里  看这里
  .then(d=>this.setData({imgUrls:d,loading:false}))
  .catch(e=>{
   this.setData({imgUrls:[],loading:false})
  })
 }
})
Copy after login

This is the index method to get the banner image, req.GetByParams('home/homebanner'), you can also bring parameters here, or you can leave them empty.

The final page looks like this

微信小程序 数据访问实例详解

In the red box on the right, we can see the data returned by the request. We can also modify the data on the right. The interface will change accordingly. This is about debugging. We will discuss it later.

Thanks for reading, I hope this helps everyone, and thank you for your support of this site!

For more detailed explanations of WeChat applet data access examples and related articles, please pay attention to the PHP Chinese website!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!