H5与小程序如何共用的一套代码？ ——小程序混合开发

目标
很多时候，大家是不是有这种想法，开发的小程序，H5与小程序能否共用的一套代码，带后端并且可以提交给微信审核？
告诉你，可以！
如何做呢？看下边

准备工作
平台：
进入www.bmob.cn
找到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）

这样就实现了，首页的广告、数据列表、内容展示功能，如果您的小程序只是一个展示功能，可以使用此代码进行修改。

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

标签聚合

【小程序源码网资源版权风险说明】：
本站为避免不必要的纷争，分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台，站长只为大家提供相关资源的介绍和跳转引导。因可能有疏忽大意，所以如有遗漏资源侵犯了您的合法权利，请联系站长删除。
【小程序源码网资源下载使用说明】：
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网毫无人看的介绍】：
本站又称Z站，原名贼娘网，开站于2018年，换过三任站长，目前站长是第四任站长，本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站，主要小程序资源有用于学习的小程序源码，也有正版原创可商用的小程序源码，是一个公益博客型网站。
【小程序源码网原创源码版权申明】：
未经小程序源码网许可，任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内，版权无使用限制)，否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】：
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网站长最后的屁话】：
如有您认为本站有任何侵犯您合法权益的文章，或者您有什么疑问需求，欢迎联系站长QQ，站长24小时在线，备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理，如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论，就不用加站长啦，对于白嫖党，QQ群才是处理问题的天堂，当然站长也欢迎大家骚扰~
小程序源码网 » H5与小程序如何共用的一套代码？ ——小程序混合开发