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

This article introduces in detail "How to share a set of codes between H5 and Mini programs," with detailed content, clear steps and proper details. I hope this article "How to share a set of codes between H5 and Mini programs" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of the small editor.

preparations

Platform:

Go to www.bmob.cn

Find Bmob's latest hybrid platform JSSDK library, which supports Node.js, Weixin Mini Programs (Mini), Weex, React Native, Quick App and browsers. Write a js for any of the above platforms.

Mixed Data SDK

The backend directly uses Bmob backend cloud. If you use your own server, you can use Fly to request the network. It is also cross-platform. For details, you can view it on github.

Selection of framework:

Since mpvue official has cross-platform front-end examples, here in order to step on less pits, select mpvue

actual combat

1: Analyze page requests

The pages that need to be implemented are as follows:

From the image above, we can see that this page has 2 data from the backend, and the sub-table is the ad map and the list data.

2. Create data sheets

2.1 advertisement map

The data structure is as follows

```

[

{

"title": "Nokia X6 Officially Released From RMB1299",

"image": "http://img.ithome.com/newsuploadfiles/focus/f3583ca6-9a52-461b-b2b2-0f649fab0516.jpg",

"link": "/pages/news/detail? id=360077&title=1299 yuan, Nokia X6 officially released "

}

]

```

Create a table slides in the background, import data/src/db/slides.json

list data

I create a table in the background, newslist, import data/src/db/newslist.json, the same operation as the previous step

detailed data

Create newscontent, import data/src/db/newscontent.json

3. Modify request code to database

List modification request code:

```

//api.js,getNewsList read

getNewsList: (r) => {

//return an asynchronous object

return new Promise((resolve, reject) => {

//query `newslist` data

const query = Bmob.Query('newslist')

query.find().then(res => {

//return a json data

resolve({'newslist': res})

}).catch(err => {

reject(err)

})

})

},

```

The data has been retrieved from the Bmob database. In this way, the home page advertising, data list, content display function, if your Mini programs is only a display function, you can use this code to modify.

Read here, this article "H5 and Mini programs how to share a set of code" article has been introduced, want to master the knowledge points of this article still need to practice to understand, if you want to know more related content of the article, welcome to pay attention to 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.