前端开发可以说是天下大乱，各家争鸣。各种开发工具、开发框架呈井喷式发展，隔三岔五就推陈出新。微信借助强大的用户群体，其小程序开发方兴未艾。近日，自己动手实操了一把从基本开始的微信小程序开发。 有些小总结分享给大家：（阅读本文需要有一点编程基础和一些前端知识。）
使用测试号开发可以很快体验微信小程序开发。
访问外部接口需要到微信小程序后台设置域名，设置域名时不需要设置到具体某个接口。要带头协议如：https或http。设置后并不会马上生效，要到微信小程序开发工具里找到项目详情，再找到本地设置，勾选不验证合法域名、web-view（业务域名）、TLS版本已经HTTPS证书。然后，开发工具会自动编译就可以调用外部接口了。具体操作参加：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html和常见问题排除:https://kf.qq.com/faq/1706236NjINj1706236VRZBR.html。
表单数据提交:
from表单结构如下：
输入内容：
提交
注：bindsubmit后的函数getinfo在对应的js文件里编写。在getinfo函数里就可以对数据进行加工处理了！
微信小程序里的from表单数据提交和普通的html里的from提交大致相同。
数据加载：
本地json数据加载：
xxx.js如下：
var json = [{“title”:"……",……}]
onLoad(){
this.setData({
//将json数据赋值给dataList
dataList: json
});
}
注：onLoad函数会在调转到此页面时自动加载设置的本地json数据。
this.setData({……})是一个数据设置的办法
xxx.wxml如下：
Title:{{item.title}}
API接口数据请求与加载：
xxx.js如下：
var self = this;
//这个变量设置很关键，不然在后面的json数据赋值会报错Cannot read property ‘setData’ of undefined;网上说这是数据作用域的问题！！！！
wx.request({
url: ‘请求url地址’, //需要提前到小程序后台设置此接口域名。
data: {
“x”:x,
“y”:y
},
header: {
‘content-type’: ‘application/json’ // 默认值
},
success(res) {
console.log(res);//打印请求数据结果。
self.setData({
//接口返回的的json数据赋值给dataList。
dataList: [{ “title”: res.data.result.title,]}]
});
xxx.wxml如下：
Title:{{item.title}}
注意：在提取API返回的数据时，如果时json格式则按照js里json数据提取的办法：用点链接的方式（data.title）；如果是数组格式的数据则按照键名的方式提取：data[‘title’]。
大致总结就是这样了！小程序开发总体来说和普通前端开发大同小异，难度不大，对于有编程基础的童鞋们，结合官方说明https://developers.weixin.qq.com/miniprogram/dev/framework/，上手还是蛮快的。
前端开发可以说是天下大乱，各家争鸣。各种开发工具、开发框架呈井喷式发展，隔三岔五就推陈出新。微信借助强大的用户群体，其小程序开发方兴未艾。近日，自己动手实操了一把从基本开始的微信小程序开发。有些小总结分享给大家：（阅读本文需要有一点编程基础和一些前端知识。）
使用测试号开发可以很快体验微信小程序开发。
访问外部接口需要到微信小程序后台设置域名，设置域名时不需要设置到具体某个接口。要带头协议如：https或http。设置后并不会马上生效，要到微信小程序开发工具里找到项目详情，再找到本地设置，勾选不验证合法域名、web-view（业务域名）、TLS版本已经HTTPS证书。然后，开发工具会自动编译就可以调用外部接口了。具体操作参加：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html和常见问题排除:https://kf.qq.com/faq/1706236NjINj1706236VRZBR.html。
表单数据提交:
from表单结构如下：
输入内容：
提交
注：bindsubmit后的函数getinfo在对应的js文件里编写。在getinfo函数里就可以对数据进行加工处理了！
微信小程序里的from表单数据提交和普通的html里的from提交大致相同。数据加载：
本地json数据加载：
xxx.js如下：
var json = [{“title”:"……",……}]
onLoad(){
this.setData({
//将json数据赋值给dataList
dataList: json
});
}
注：onLoad函数会在调转到此页面时自动加载设置的本地json数据。
this.setData({……})是一个数据设置的办法
xxx.wxml如下：
Title:{{item.title}}
API接口数据请求与加载：
xxx.js如下：
var self = this;
//这个变量设置很关键，不然在后面的json数据赋值会报错Cannot read property ‘setData’ of undefined;网上说这是数据作用域的问题！！！！
wx.request({
url: ‘请求url地址’, //需要提前到小程序后台设置此接口域名。
data: {
“x”:x,
“y”:y
},
header: {
‘content-type’: ‘application/json’ // 默认值
}
success(res) {
console.log(res);//打印请求数据结果。
self.setData({
//接口返回的的json数据赋值给dataList。
dataList: [{ “title”: res.data.result.title,]}]
});
xxx.wxml如下：
Title:{{item.title}}
注意：在提取API返回的数据时，如果时json格式则按照js里json数据提取的办法：用点链接的方式（data.title）；如果是数组格式的数据则按照键名的方式提取：data[‘title’]。
大致总结就是这样了！小程序开发总体来说和普通前端开发大同小异，难度不大，对于有编程基础的童鞋们，结合官方说明https://developers.weixin.qq.com/miniprogram/dev/framework/，上手还是蛮快的。
敬请关注公众号：巴山谈笑。