H5與小程序如何共用的一套代碼？ ——小程序混合開(kāi)發(fā)
發(fā)布時(shí)間：2018-06-04 12:16 所屬欄目：小程序開(kāi)發(fā)教程
|
目標(biāo) 很多時(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è)面如下：  從上圖，我們可以看到這個(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)行修改。 |
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源
碼云倉(cāng)庫(kù):
本文地址：http://m.szcjxy.com/wxmini/doc/course/24498.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢： 點(diǎn)擊咨詢
