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

定制小法式、毕设、stitp请私信。
云开辟请参考这个demo



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


    理论上也很简单，就是找一个可查归属地的API停止接口挪用，做一个返回数据展现而已。 只要你会JavaScript，真的是分分钟上手，可是小法式上线还是比力烦琐的，而且要学着用微信小法式的IDE 所谓开辟一小时，上线等几年。
    关于微信小法式的技术文档见官方网站：http://nginx.org/en/ 小我感觉写得异常细致。

• 1、申请账号
  
      申请账号的地址 https://mp.weixin.qq.com/wxopen/waregister?action=step1
  
      微信这点比力坑，能够由于治理需求。小我开辟的话，虽然一小我名下可以有五个小法式，但一个邮箱只能对应治理一个小法式。 假如你想开辟多个，还很多用几个邮箱，很是麻烦。
  
      按流程注册完成以后，会有一个AppID(小法式ID)，这个ID很重要。在IDE建立项目和项目上线都是需要的。
  

• 2、安装开辟者工具IDE
  
  https://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长宽高，这里我首要说一下布景图片的款式：

1. page{
2.     height:100%;
3.   }
4.   .background {
5.     width: 100%;
6.     height: 100%;
7.     position:fixed;
8.     background-size:100% 100%;
9.     z-index: -1;
10.   }

复制代码

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

1. btnclick:function(){
2.        var iphone = this.data.iphones;
3.        var that = this;
4.        var key = "挪用API的key，不用key可以不写";
5.        if(iphone != null && iphone != ''){
6.        wx.request({
7.          url: 'https://apis.juhe.cn/mobile/get?phone='+iphone+'&key='+key, //API的URL
8.          data: {
9.          },
10.          header: {
11.            'content-type': 'application/json' // 默许值
12.          },
13.          success (res) {
14.            console.log(res.data);
15.              if(res.data.result == null){
16.                that.setData({
17.                  province: "号码不存在",
18.                  city:"",
19.                  company: ""
20.                 })
21.              }else{
22.                if(res.data.result.city == res.data.result.province){ //这里是避免出现 北京北京联通的情况，直辖市用法
23.                  that.setData({
24.                    province: res.data.result.province,
25.                    city: "",
26.                    company: res.data.result.company,
27.                   })
28.                }else{
29.                  that.setData({
30.                    province: res.data.result.province,
31.                    city: res.data.result.city,
32.                    company: res.data.result.company,
33.                   })
34.                }
35.              }
36.            }
37.        })      
38.        }
39.    },

复制代码

   有些重要的点说一下，首先是这里必必要用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集成了真机调试的功用。
    微信小法式的代码有四个版本，别离是开辟版、体验版、考核版和线上版
     当你把开辟板上传以后就天生了体验版，可用来停止测试。测试无误以后 即可公布考核版，在微信官方考核以后，即可上线成为线上版本。考核大约在几天时候。

本人授权维权骑士对我公布文章的版权行为停止究查与维权。未经本人答应，不成私行转载或用于其他贸易用处。

大佬!

利害

可以挂下源码(去除了敏感信息)吗？

没啥敏感信息、可以。

这...除了归属地api啥也没有。10分钟就闲多了，还一个小时

我觉着你一分钟便可以[附和][附和][附和]

叨教一下接入API可以用微信供给的云开辟吗？

兄弟我能加下你微信吗？我想做一个小法式。

完全看不懂[大哭]