2019年7月

目标

开发一款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个接口，他们的数据结构分别是

实战开始二：建立数据表

  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
导入数据

  1. 列表数据

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

  2. 详细数据

    建立新闻内容表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开源代码

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

[Quikapp快应用【小程序】开发入门教程二] 调试器入门

1. 安装调试器

简书新规则不能有二维码，这个地方是一张运行起来内网的二维码图片

上一篇讲到二维码，显示出来后，手机应该安装调试器，教程网址

https://doc.quickapp.cn/tools/debugging-tools.html

2.扫描二维码

image

遇到问题1： 扫描后手机没反应，用另外一台华为手机扫描没问题。

解决方法：手机重新安装调试器，重启手机

遇到问题2：使用实时编译，报错，错误1：npm run watch 命令执行后提示错误 ，错误2：命令执行成功，手机调试器提示安装失败。

错误一：解决办法暂时没找到，过了几天，没动。命令就执行成功了，本环境为MAC。

错误二：最终找到原因，这里需要2个进程，单独执行npm run watch 是没效果的，需要把npm run server 也执行起来。

错误二提示截图：

image

3.成功实现自动刷新调试

npm run watch

解决调试问题，接下来就可以具体开发应用了。 这里目前有个神奇的问题是chrome浏览器中的devtools工具 是否显示需要看运气的，而且只支持chrome，我执行了好多次运行命令npm run server 只有一次弹出了调试地址。

http://192.168.1.38:12306/inspector/inspector.html?ws=192.168.1.43:42717/inspector&remoteFrontend=true&dockSide=undocked, 如果能拿到浏览器的调试地址，到这里就可以实现手机、电脑同步调试了。

image