目标
开发一款H5与小程序共用的一套代码，带后端并且可以提交给微信审核。
简介：
Bmob 最近推出了混合平台 JSSDK库，支持 Node.js 、微信小程序 、Weex 、React Native 、Quick App 和浏览器等，写一份js可以以上任意平台，如果前端UI相关用法可以相同，也就是一份代码可以在多个平台使用。就拿行业微信小程序来说，目前支持跨平台的框架有mpvue、与wepy，分别是美团与腾讯出的。mpvue 有跨平台示例、wepy背后有腾讯为靠山各有优势。
混合数据SDK
文档地址： https://bmob.github.io/hydrogen-js-sdk/#/?id=登陆
这里使用的是Bmob后端云、如果使用自己的服务器，请求网络这块可以用
Fly，同样是夸平台，具体请上github查看
框架的选择
由于mpvue官方有跨平台前端示例，这里为了少踩点坑，选择mpvue
实战开始一：分析页面请求
需要实现的页面
demo
从上图，我们可以看到这个页面，有2个数据来自后端，分表是
广告图与列表数据。这里有2个接口，他们的数据结构分别是
实战开始二：建立数据表
- 广告图
数据结构如下
[
{
"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
实战开始三：修改请求代码到数据库
列表修改请求代码
//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
点击一下连接查看
Github开源代码
这样就实现了，首页的广告、数据列表、内容展示功能，如果您的小程序只是一个展示功能，可以使用此代码进行修改。下一节我们再讲朋友圈的实现。
