您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“H5與小程序怎么共用的一套代碼”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“H5與小程序怎么共用的一套代碼”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
準(zhǔn)備工作
平臺:
進(jìn)入www.bmob.cn
找到Bmob最新推出的混合平臺 JSSDK庫,它支持 Node.js 、微信小程序 、Weex 、React Native 、Quick App 和瀏覽器等,寫一份js可以以上任意平臺。
混合數(shù)據(jù)SDK
后端直接使用Bmob后端云,如果使用自己的服務(wù)器,請求網(wǎng)絡(luò)這塊可以用Fly,同樣是跨平臺,具體可以上github查看。
框架的選擇:
由于mpvue官方有跨平臺前端示例,這里為了少踩點(diǎn)坑,選擇mpvue
實(shí)戰(zhàn)
1:分析頁面請求
需要實(shí)現(xiàn)的頁面如下:
從上圖,我們可以看到這個(gè)頁面,有2個(gè)數(shù)據(jù)來自后端,分表是廣告圖與列表數(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ā)布"
}
]
```
在后臺建個(gè)表slides,導(dǎo)入數(shù)據(jù)/src/db/slides.json
列表數(shù)據(jù)
我在后臺建個(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.修改請求代碼到數(shù)據(jù)庫
列表修改請求代碼:
```
//api.js,getNewsList改為
getNewsList: (r) => {
//返回一個(gè)異步對象
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ù)庫調(diào)用出來了。這樣就實(shí)現(xiàn)了,首頁的廣告、數(shù)據(jù)列表、內(nèi)容展示功能,如果您的小程序只是一個(gè)展示功能,可以使用此代碼進(jìn)行修改。
讀到這里,這篇“H5與小程序怎么共用的一套代碼”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。