您好,欢迎来到二三四教育网。
搜索
您的当前位置:首页H5与小程序如何共用的一套代码? ——小程序混合开发(1)

H5与小程序如何共用的一套代码? ——小程序混合开发(1)

来源:二三四教育网

一、目标

很多时候,大家是不是有这种想法,开发的小程序中,H5与小程序能否共用的一套代码,带后端并且可以提交给微信审核呢?

告诉你,可以!

如何做呢?看下边

二、准备工作

平台:

找到Bmob最新推出的混合平台 JSSDK库,它支持 Node.js 、微信小程序 、Weex 、React Native 、Quick App 和浏览器等,写一份js可以以上任意平台。

混合数据SDK

后端直接使用Bmob后端云,如果使用自己的服务器,请求网络这块可以用Fly,同样是跨平台,具体可以上github查看。

框架的选择:

由于mpvue官方有跨平台前端示例,这里为了少踩点坑,选择mpvue

三、实战

1:分析页面请求

需要实现的页面如下:

1.png

从上图,我们可以看到这个页面,有2个数据来自后端,分表是广告图与列表数据。

2.建立数据表

2.1广告图

数据结构如下

[

 {

 "title": "1299元起,诺基亚X6正式发布",

 "image": 

 "link": "/pages/news/detail?id=360077&title=1299元起,诺基亚X6正式发布"

 }

 ]

在后台建个表slides,导入数据/src/db/slides.json

2.png

2.2 列表数据:

我在后台建个表newslist,导入数据/src/db/newslist.json,跟上一步一样的操作

2.3 详细数据:

建立新闻内容表newscontent,导入数据/src/db/newscontent.json

3.修改请求代码到数据库

列表修改请求代码:


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)

 })

 })

 },

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

往期经典文章:

Copyright © 2019- how234.cn 版权所有 赣ICP备2023008801号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务