H5與小程式如何共用的一套代碼？ ——小程式混合開發（1）

一、目标

很多時候，大家是不是有這種想法，是否能開發一款小程式，H5與小程式共用的一套代碼，帶後端并且可以送出給微信稽核。

告訴你，可以！

如何做呢？看下邊

二、準備工作

平台：

進入：bmob後端雲

找到Bmob最新推出的混合平台 JSSDK庫，它支援 Node.js 、微信小程式 、Weex 、React Native 、Quick App 和浏覽器等，寫一份js可以以上任意平台。

混合資料SDK

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

後端直接使用Bmob後端雲，如果使用自己的伺服器，請求網絡這塊可以用Fly，同樣是跨平台，具體可以上github檢視。

架構的選擇：

由于mpvue官方有跨平台前端示例，這裡為了少踩點坑，選擇mpvue

三、實戰

1：分析頁面請求

需要實作的頁面如下：

從上圖，我們可以看到這個頁面，有2個資料來自後端，分表是廣告圖與清單資料。

2.建立資料表

2.1廣告圖

資料結構如下：

[
  {
  "title": "1299元起，諾基亞X6正式釋出",
  "image": "http://img.ithome.com/newsuploadfiles/focus/f3583ca6-9a52-461b-b2b2-0f649fab0516.jpg",
  "link": "/pages/news/detail?id=360077&title=1299元起，諾基亞X6正式釋出"
  }
 ]
           

在背景建個表slides，導入資料/src/db/slides.json

清單資料

我在背景建個表newslist，導入資料/src/db/newslist.json，跟上一步一樣的操作

詳細資料

建立新聞内容表newscontent，導入資料/src/db/newscontent.json

3.修改請求代碼到資料庫

清單修改請求代碼

//api.js,getNewsList改為

getNewsList: (r) => {
    //傳回一個異步對象
    return new Promise((resolve, reject) => {
    //查詢`newslist` 資料
      const query = Bmob.Query('newslist')
      query.find().then(res => {
         //傳回一個json資料
        resolve({'newslist': res})
      }).catch(err => {
        reject(err)
      })
    })
  },
           

資料已經從Bmob資料庫調用出來了。廣告圖操作一樣，具體代碼看github（https://github.com/bmob/ithome-lite）

這樣就實作了，首頁的廣告、資料清單、内容展示功能，如果您的小程式隻是一個展示功能，可以使用此代碼進行修改。