一小时开发一个简单的微信小程序

云开发请参考这个demo

laughing：开发一个疫情信息申报的微信小程序

虽然不是专业做微信小程序的，但是由于无聊做一个简单的demo了解一下开发流程还是可以的。 这次做了一个手机号码归属地查询的小程序。做出来的实物如图：

理论上也很简单，就是找一个可查归属地的API进行接口调用，做一个返回数据展示而已。 只要你会JavaScript，真的是分分钟上手，但是小程序上线还是比较繁琐的，而且要学着用微信小程序的IDE 所谓开发一小时，上线等几年。

关于微信小程序的技术文档见官方网站：http://nginx.org/en/个人觉得写得异常细致。

1、申请账号 申请账号的地址 https://mp.weixin.qq.com/wxopen/waregister?action=step1 微信这点比较坑，可能由于管理需求。个人开发的话，虽然一个人名下可以有五个小程序，但一个邮箱只能对应管理一个小程序。 如果你想开发多个，还得多用几个邮箱，非常麻烦。 按流程注册完成之后，会有一个AppID(小程序ID)，这个ID很重要。在IDE创建项目和项目上线都是需要的。 2、安装开发者工具IDEhttps://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 我这里用的是稳定版 Stable Build。微信的IDE界面还行，但是拓展功能很差，快捷键支持的也不多，不是特别好用 。我大致给画一下区域3、基本认识 这里我们首先要认识四种文件类型 json、js、wxml、wxss。

json和js大家都很熟悉了，微信小程序用json存储数据或是写配置信息等。js用来写JavaScript。 令人好奇的是wxml、wxss到底是什么东西，大家都很熟悉HTML + CSS + JS的模式。实际上wxml就是html,而wxss就是写样式的css。 wxml也有类似vue的那种{{}}绑定数据的方法。wxss增加了一个rpx的计量单位，方便手机操作。我发现这套模式对有的原生html写法 有很多不兼容的地方，还得考虑安卓和ios的兼容性问题等。我们只是做一个demo的话、暂时不去学这些东西，就当作HTML + CSS + JS的模式 去写吧，遇到具体的问题再具体解决。 微信小程序有一个主配置文件就是app.json，我们可以看出来是配置index和背景样式之类的东西，这里我们暂时不用改这些。

4、开发 终于讲到开发内容了，我们看上图的app.json，就知道index对应的目录为 pages/index/index,也就是打开小程序的第一个页面。于是我们首先来看这个html怎么写，哦、不，wxml怎么写，非常简单的写一个。

wxml也是支持那种类似vue双括号{{}}绑定value的写法，我标的很详细。写好之后在js的data{}里声明数据就轻松实现js对绑定value的操作了。

样式方面可以自己在wxss里面设置，无非就是改view的class长宽高，这里我主要说一下背景图片的样式：

page{ height:100%; } .background { width: 100%; height: 100%; position:fixed; background-size:100% 100%; z-index: -1; }

最后就是js的写法了，之前我们在查询按钮绑定了一个事件btnclick，我们只需要声明一个点击调用API的函数即可。 查询手机号码归属的免费API非常多，读者可自行查阅。这里用了wx.request来发起请求：

btnclick:function(){ var iphone = this.data.iphones; var that = this; var key = "调用API的key，不用key可以不写"; if(iphone != null && iphone != ''){ wx.request({ url: 'https://apis.juhe.cn/mobile/get?phone='+iphone+'&key='+key, //API的URL data: { }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data); if(res.data.result == null){ that.setData({ province: "号码不存在", city:"", company: "" }) }else{ if(res.data.result.city == res.data.result.province){ //这里是防止出现 北京北京联通的情况，直辖市用法 that.setData({ province: res.data.result.province, city: "", company: res.data.result.company, }) }else{ that.setData({ province: res.data.result.province, city: res.data.result.city, company: res.data.result.company, }) } } } }) } },

有些重要的点说一下，首先是这里必须要用var that = this;的定义去用this。 然后不同的接口返回的res.data的json格式肯定不同，请自行调整。重要的一点每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信。也就是说，你不配的话这个接口是调用不通的 1、服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置，配置时需要注意： 2、域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议； 3、域名不能使用 IP 地址（小程序的局域网 IP 除外）或 localhost； 4、可以配置端口，如

https://myserver.com:8080，但是配置后只能向 https://myserver.com:8080发起请求。如果向 https://myserver.com、https://myserver.com:9091等 URL 请求则会失败。 5、如果不配置端口。如 https://myserver.com，那么请求的 URL 中也不能包含端口，甚至是默认的 443 端口也不可以。如果向 https://myserver.com:443请求则会失败。 6、域名必须经过 ICP 备案； 7、出于安全考虑，http://api.weixin.qq.com不能被配置为服务器域名，相关API也不能在小程序内调用。 开发者应将 AppSecret 保存到后台服务器中，通过服务器使用 getAccessToken 接口获取 access_token，并调用相关 API； 8、对于每个接口，分别可以配置最多 20 个域名。

* 5、上传代码及版本管理 小程序写好之后进行模拟器测试的同时，一定要真机调试一下，看一下有没有兼容性的问题。IDE集成了真机调试的功能。 微信小程序的代码有四个版本，分别是开发版、体验版、审核版和线上版 当你把开发板上传之后就生成了体验版，可用来进行测试。测试无误之后 即可发布审核版，在微信官方审核之后，即可上线成为线上版本。审核大约在几天时间。

教学或需要源码可关注微信公众号。

本人授权维权骑士对我发布文章的版权行为进行追究与维权。未经本人许可，不可擅自转载或用于其他商业用途。

网站名称：一小时开发一个简单的微信小程序
文章来源：https://www.cdcxhl.com/news/219877.html

成都网站建设公司_创新互联，为您提供云服务器、小程序开发、网站制作、微信小程序、软件开发、企业建站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联