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

This article mainly introduces the Wechat development of how to achieve data access, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to know about it.

To start with, the structure of Mini Program

As shown in the figure

1. Each view (.wxml) only needs to add a script (.js) and style (.wxss) corresponding to the name, without reference. The scripts and styles under page are inherited to the outermost app.js, app.wxcss.

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

3. Utils is used to place the data interface

Data access, if you know something about ajax, it's not a problem. There's nothing to talk about.

WeChat Mini Programs, because IDE is too bad, if the code is written hard to read, the whole project will be difficult to maintain.

Because I haven't written app, I don't know how data access is encapsulated in app.

As a Mini Program programmer with 3 days' working experience, I think it would be too unOOP if the data on each page is accessed by himself.

Then I thought of linq to sql and only took two of these methods. I originally intended to use singelordefault,firstordefault, but it was troublesome to think about it, so I used getbyparams,getbyid to find out all the data according to the conditions, or to get a piece of data according to id.

Let's just look at the method. It's a little verbose.

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)}}

Module.exports = {} is a fixed way of writing, in which one method is written, and each method is separated.

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

Look at a calling chestnut and you'll see 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') / / look here. Then (d = > this.setData ({imgUrls:d,loading:false})) .catch (e = > {this.setData ({imgUrls: [], loading:false}))

This is index's method of getting a banner graph, req.GetByParams ('home/homebanner'), either with parameters or empty

The final page looks like this

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

Thank you for reading this article carefully. I hope the article "how to achieve data access in Wechat Development" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you 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.