H5與小程序如何共用的一套代碼？ ——小程序混合開發

1、目標

不少時候，你們是否是有這種想法，開發的小程序，H5與小程序可否共用的一套代碼，帶後端而且能夠提交給微信審覈？
告訴你，能夠！
如何作呢？看下邊

2、準備工做

1.平臺：
進入bmob後端雲
找到Bmob最新推出的混合平臺 JSSDK庫，它支持 Node.js 、微信小程序 、Weex 、React Native 、Quick App 和瀏覽器等，寫一份js能夠以上任意平臺。

2.混合數據SDK
文檔地址：http://doc.bmob.cn/data/wecha...

後端直接使用Bmob後端雲，若是使用本身的服務器，請求網絡這塊能夠用Fly，一樣是跨平臺，具體能夠上github查看。

3.框架的選擇：
因爲mpvue官方有跨平臺前端示例，這裏爲了少踩點坑，選擇mpvue

3、實戰

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/ithom...）這樣就實現了，首頁的廣告、數據列表、內容展現功能，若是您的小程序只是一個展現功能，可使用此代碼進行修改。