定制小程序,全套,请私信。
云开发请参考这个demo
虽然我不是专业的微信小程序,但由于无聊,还是可以做一个简单的demo来了解开发过程。这次我做了一个小程序来查询手机号码的归属地。实物如图:
理论上也很简单 外包小程序开发 ,就是找一个可以查归属地的API做一个接口调用,做一个返回数据展示就可以了。只要你懂JavaScript,分分钟上手真的很容易,但是启动小程序还是比较麻烦,而且要学会用微信小程序的IDE开发一小时,还要等几个年上线。
微信小程序的技术文档见官网:/en/ 个人觉得很详细。
json和js大家都比较熟悉,微信小程序使用json来存储数据或者写配置信息等小程序开发,js是用来写JavaScript的。令人好奇的是 wxml 和 wxss 是什么。 HTML + CSS + JS的模式大家都很熟悉。其实wxml就是html小程序开发小程序开发,wxss就是写样式的css。 wxml还有一个类似于vue的绑定数据的{{}}方法。 wxss增加了rpx计量单位,方便手机操作。我发现这种模式与一些原生的html编写方式不兼容 小程序软件定制 ,还得考虑Android和ios的兼容性。如果只是做一个demo,暂时不学这些东西,直接用HTML+CSS+JS的方式写,遇到具体问题具体解决。
微信小程序有一个主配置文件app.json。我们可以看到它配置了诸如索引和背景样式之类的东西。我们暂时不需要更改这些。
wxml也支持类似vue双括号{{}}的绑定值的写法,我说的很详细。写好后在js的data{}中声明数据,方便实现js对绑定值的操作。
你可以自己设置wxss中的样式。无非就是改变视图的类长宽高。这里主要说一下背景图的风格:
p>
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;此处必须使用 使用此。那么不同接口返回的res.data的json格式肯定是不同的,请自行调整。
重点是每个微信小程序都需要提前设置好通讯域名,小程序只能与指定的域名进行通讯。也就是说,如果你不配,这个接口是不能调用的。
1、服务器域名需要在“小程序后台-开发-开发设置-服务器域名”中配置,配置时需要注意:
发现、改变
探知、求新
共享,感恩一路相伴
昱远品牌形象已完成全面升级
点击访问新官网