商城系統(tǒng) 注冊(cè)

H5與小程序如何共用的一套代碼

2020-09-27|HiShop
導(dǎo)讀:很多時(shí)候,大家是不是有這種想法,開(kāi)發(fā)的小程序,H5與小程序能否共用的一套代碼,帶后端并且可以提交給微信審核?那么如何做呢?...

H5與小程序如何共用的一套代碼

很多時(shí)候,大家是不是有這種想法,開(kāi)發(fā)的小程序,H5與小程序能否共用的一套代碼,帶后端并且可以提交給微信審核?

那么如何做呢?

準(zhǔn)備工作

平臺(tái):

進(jìn)入www.bmob.cn

找到Bmob最新推出的混合平臺(tái) JSSDK庫(kù),它支持 Node.js 、微信小程序 、Weex React Native 、Quick App 和瀏覽器等,寫一份js可以以上任意平臺(tái)。

混合數(shù)據(jù)SDK

文檔地址: http://doc.bmob.cn/data/wechat_app_new/index.html

后端直接使用Bmob后端云,如果使用自己的服務(wù)器,請(qǐng)求網(wǎng)絡(luò)這塊可以用Fly,同樣是跨平臺(tái),具體可以上github查看。

框架的選擇:

由于mpvue官方有跨平臺(tái)前端示例,這里為了少踩點(diǎn)坑,選擇mpvue

實(shí)戰(zhàn)

1:分析頁(yè)面請(qǐng)求

需要實(shí)現(xiàn)的頁(yè)面如下:

H5與小程序如何共用的一套代碼

從上圖,我們可以看到這個(gè)頁(yè)面,有2個(gè)數(shù)據(jù)來(lái)自后端,分表是廣告圖與列表數(shù)據(jù)。

2.建立數(shù)據(jù)表

2.1廣告圖

數(shù)據(jù)結(jié)構(gòu)如下

 ```

[

  {

  "title": "1299元起,諾基亞X6正式發(fā)布",

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

  "link": "/pages/news/detail?id=360077&title=1299元起,諾基亞X6正式發(fā)布"

  }

 ]

 ```

在后臺(tái)建個(gè)表slides,導(dǎo)入數(shù)據(jù)/src/db/slides.json

列表數(shù)據(jù)

我在后臺(tái)建個(gè)表newslist,導(dǎo)入數(shù)據(jù)/src/db/newslist.json,跟上一步一樣的操作

 

詳細(xì)數(shù)據(jù)

建立新聞內(nèi)容表newscontent,導(dǎo)入數(shù)據(jù)/src/db/newscontent.json

 

3.修改請(qǐng)求代碼到數(shù)據(jù)庫(kù)

列表修改請(qǐng)求代碼:

```

//api.js,getNewsList改為

 

getNewsList: (r) => {

    //返回一個(gè)異步對(duì)象

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

    //查詢`newslist` 數(shù)據(jù)

      const query = Bmob.Query('newslist')

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

         //返回一個(gè)json數(shù)據(jù)

        resolve({'newslist': res})

      }).catch(err => {

        reject(err)

      })

    })

  },

 ```

數(shù)據(jù)已經(jīng)從Bmob數(shù)據(jù)庫(kù)調(diào)用出來(lái)了。廣告圖操作一樣,具體代碼看github(https://github.com/bmob/ithome-lite

這樣就實(shí)現(xiàn)了,首頁(yè)的廣告、數(shù)據(jù)列表、內(nèi)容展示功能,如果您的小程序只是一個(gè)展示功能,可以使用此代碼進(jìn)行修改。

H5與小程序如何共用的一套代碼

電話咨詢 預(yù)約演示 0元開(kāi)店