小程序混合开发（1）准备工作 目标开发一款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实战开始一：分析页面请求需要实现的页面从上图，我们可以看到这个页面，有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开源代码这样就实现了，首页的广告、数据列表、内容展示功能，如果您的小程序只是一个展示功能，可以使用此代码进行修改。下一节我们再讲朋友圈的实现。

Quikapp快应用【小程序】开发入门教程二 [Quikapp快应用【小程序】开发入门教程二] 调试器入门1. 安装调试器简书新规则不能有二维码，这个地方是一张运行起来内网的二维码图片上一篇讲到二维码，显示出来后，手机应该安装调试器，教程网址https://doc.quickapp.cn/tools/debugging-tools.html2.扫描二维码遇到问题1： 扫描后手机没反应，用另外一台华为手机扫描没问题。解决方法：手机重新安装调试器，重启手机遇到问题2：使用实时编译，报错，错误1：npm run watch 命令执行后提示错误 ，错误2：命令执行成功，手机调试器提示安装失败。错误一：解决办法暂时没找到，过了几天，没动。命令就执行成功了，本环境为MAC。错误二：最终找到原因，这里需要2个进程，单独执行npm run watch 是没效果的，需要把npm run server 也执行起来。错误二提示截图：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, 如果能拿到浏览器的调试地址，到这里就可以实现手机、电脑同步调试了。