H5与小程序如何共用的一套代码
惠民小程序小编了解到,微信小程序成为当下热门话题,下面从多个方面来谈谈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) 这样就实现了,首页的广告、数据列表、内容展示功能,如果您的小程序只是一个展示功能,可以使用此代码进行修改。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |