开发小程序被问到最频繁的问题,小程序的网络

2019-10-09 13:20栏目:专项工作
TAG:

图片 1

我们前端开发就要有面向对象的思想,让自己写的程序更加简单明了,不要有太多的融于代码,所以这里提到了封装的思想。

根据导出的GPX文件,在地图上绘制其路径轨迹。

连胜老师在自己的微信小程序开发群里,也经常帮人解答问题,在这里整理一下最频繁被问到的小程序问题。希望对那些还不了解小程序的同学有帮助,同时也欢迎各位小程序大牛指正错误。

之前的项目里每次调用网络请求都调用了类似的代码:

GPX: the GPS Exchange Format

1、小程序开发难嘛,需要有什么编程基础?

 //加载数据 requestData() { var that = this if (that.data.listData.length < 1) { wx.showToast({ title: '加载中', duration: 500 }) } else { wx.showNavigationBarLoading() } wx.request({ url: app.globalData.webUrl+"serviceAction/getStoreList.do", data: { longitude: app.globalData.longitude, latitude: app.globalData.latitude, city: "长沙", page: this.data.pageNum, pagesize: 10, userId: 38971, }, method: "POST", "Content-Type": "application/x-www-form-urlencoded", success: function  { wx.stopPullDownRefresh() if (that.data.pageNum == 1) { that.data.listData = []//清空数组 } var list = []; var imgUrl = []; var url = "http://yijiao.oss-cn-qingdao.aliyuncs.com/"; for (var i = 0; i < res.data.content.length; i++) { list.push(res.data.content[i]); imgUrl.push(url + res.data.content[i].mainImgUrl) console.log("请求成功" + res.data.content[i]) } that.setData({ listData: list,//更新数据 imageUrl: imgUrl }) }, fail: function () { wx.showModal({ title: '加载出错', showCancel: false }) }, complete: function () { wx.hideToast() wx.hideNavigationBarLoading }

GPX (the GPS Exchange Format) is a light-weight XML data format for the interchange of GPS data (waypoints, routes, and tracks) between applications and Web services on the Internet.

常言道:难者不会,会者不难

每次只要涉及网络获取数据,就会有这些冗余代码的出现,之前不太熟悉,,没有做封装,现在做了一个项目,知道了很多思想,也了解了大致,想做一个简单的调用,也方便了以后查找某个接口的简化。

GPX 是一种轻量级XML数据格式,用于在互联网上的应用程序和Web服务之间交换GPS数据。

对于还不了解小程序,或者还未入门的同学来说,可能会觉得难,因为对于这部分同学来说,小程序是一个新生事情,任何人在面对新产品时都会有自己的判断;

1.咱们把公共方法写在util.j中util.js代码:

  • 是否能够直接读取GPX文件—— 否。
  • 如何读取XML文件—— 也不太方便,需要借助第三方库。
  • 搜索过程受到启发,小程序多使用JSON格式数据,何不直接操作JSON —— Bingo!

对于已经折腾过小程序的同学来说,可能不会觉得难,特别是做WEB前端的同学,甚至会觉得上手很容易,看看官方文档,就可以自己开发小程序了,so easy!

var webUrl = "https://www.jiaodutong.com/";//网络请求方法function getWebDataWithPostOrGet{ wx.request({ url: webUrl +model.url , data:model.param, header: { "Content-Type": "application/json" }, method: model.method, success: function { model.success }, fail: function{ wx.showModal({ title: res, showCancel: false }) } })}// 导出模块module.exports = { getWebDataWithPostOrGet: getWebDataWithPostOrGet}

GPX转JSON

在线XML转JSON - BeJSON为了方便后续绑定使用,转换后批量将“lat”替换为“latitude”、“lon”替换为“longitude”。

图片 2GPX图片 3JSON

开发小程序,如果是做小程序前端部分,建议还是要有web前端基础,要对HTML、CSS、JS有基础,才能更顺手的开发小程序。做过移动端H5开发的同学最合适~

然后前端调用就可以这样做了:

获取JSON文件

将转换后的JSON文件部署到本地服务器,先进行本地测试。通过wx.request获取数据:微信小程序通过api接口将json数据展现到小程序示例

wx.request({ url: '', // https接口路径 header: { // 数据类型等 'Content-Type': 'application/json' }, success: function { //这里就是请求成功后,进行一些函数操作 console.log }})

使用本地链接进行测试会报错,需要将项目设置里勾选上“不校验...”: 微信小程序连接本地接口

图片 4

本地测试没问题后,将文件部署到外网环境,改下url就可以了。

如果是小程序服务端,其实什么语言都可以,nodejs、java、python、php、go等,这些语言都可以。做过公众号H5服务端开发的同学,基本零基础上手,微信的API大部分是通用或者类似的。

var utils = require('../../utils/util.js')var webData = { "longitude": app.globalData.longitude, "latitude": app.globalData.latitude, "city": "长沙", "page": 0, "pagesize": 10, "userId": 38971 } utils.getWebDataWithPost({ url: utils.bigUrl , param: webData, method: "POST", success:function { console.log(data.content[0].mainImgUrl); } })

绘制路径

由于数据格式已经与小程序要求的一致了,直接将其赋给对应的Key即可。

var trkPoints = res.data.gpx.trk.trkseg.trkpt;_this.setData({ polyline: [{ points: trkPoints, color: "#FF0000DD", width: 2, }] }, function () { console.log("Success"); })

需要注意的是,在wx.request回调里直接使用this.setData会报错:微信小程序中this指向作用域问题this.setData is not a function报错。

2、小程序和APP的区别是什么,小程序是否会取代APP?

我之前写的 "Content-Type": "application/x-www-form-urlencoded", 报了个错误

真机运行

图片 5图片.png

至此,已基本满足预研需求,后续开发具体功能时会方便不少啦 ~ OO ~如果能够显示卫星地图就完美了,不过还没找到好的解决方案,留作另一个问题吧,TX不开放也没办法了。

小程序和APP的区别,主要分两点:

图片 6错误

1、微信用户就是小程序的潜在用户;

接口本身是没有问题的,但是400访问不到,想到可能是header 的问题,查看文档:

2、官方对小程序的定义是实现“触手可及”,也就是无需安装。

图片 720170329160326213.jpg

以上两点可以说是小程序的优点,也是缺点。

改为 "Content-Type": "application/json",正确拿到返回数据。

1、小程序依赖于微信,只能在微信中运行,无法单独存在;

还有几点需要注意下:1.一般对自己写的接口给自己用的时候,method方法或header都是约定好的,所以不用重复书写,哎util中写为固定的格式。

2、免安装,这样就会比APP更多的消耗用户流量(即使小程序有缓存机制,但和APP比,每次下载素材都需要手机流量)。

2.而fail回调方法也可以统一处理;进一步地,也可以对success回调里的针对code值进一步判断,特定错误码统一处理,比如跳转登录页面等。例如下列代码,更加完善。

所以,小程序没办法取代APP,就像APP没办法取代H5一样。张小龙的说法是,小程序会替代80%的APP,连胜老师觉得APP和小程序可以同时存在,是个互补关系,并不能做到完全替代

if(res.data.code==0) { model.success }

3、快应用和小程序哪个更有前途?

3.如果每一个接口,都当作参数,项目变大后,接口特别多,查找不方便,可以写一个公共接口类,有一点需要注意就是暴露变量和暴露方法不同类如:url.js代码

这个问题最近很多同学都在讨论,快应用是九大手机厂商基于硬件平台共同推出的新型应用生态。可以说是和微信小程序走的同样的路线:无需安装,即点即用。

//获取门店列表var bigUrl = "serviceAction/getStoreList.do";//获取项目列表var projectList = "serviceAction/getItemsByStoreId.do"//导出模块module.exports = { bigUrl, projectList}

但是有个问题,这九大手机厂商都是安卓手机厂商,苹果并没有参与,也就是说快应用只能在安卓上运行,IOS用户没办法使用

完美!

而微信小程序是信托在微信APP内,所以,不受平台限制,IOS用户也能正常使用小程序。

每天看到阅读量和粉丝的增加都激励自己要多多分享,准备写一个小程序的专题,希望大家可以共同进步。

至于快应用和小程序哪个更有前途,目前来看,微信小程序有优势,长期来看,连胜老师觉得小程序还是有优势的,毕竟做的早,有先天优势。互联网公司的单一领域,往往只会有一家独大~

4、小程序有哪些盈利模式?

做任何产品都是为了盈利,所以,这个问题也是很多人会问到的。

版权声明:本文由ag真人发布于专项工作,转载请注明出处:开发小程序被问到最频繁的问题,小程序的网络