微信小程序学习笔记
此文主要总结一下对小程序开发的一些认识,本人非专业前端开发,主要是写给自己看的。
小程序开发阶段主要使用到两个工具
1:微信开发者工具
主要用于代码编写和效果预览,还可以进行 “真机调试“
2:云开发控制台
这可以看作是微信提供的小型服务器,通过可视化控制台能够查看数据库和文件存储情况等,轻度需求完全可以省去自备服务器。
小程序的几种文件格式
WXML:对应HTML,提供很多常用的组件。
WXSS:对应CSS,基本没差别,目前体会最深的是尺寸单位rpx替代像素单位px,能很方便的适配各种分辨率的手机。
JS:同JS。
JSON:同JSON。
小程序的目录结构很简单
pages:一个页面对应一个文件夹,一个文件夹一般都包含wxml、wxss、js、json,开发过程非常顺手。
1. wxml确定好大致的页面元素
2. wxss对每个元素进行样式调整
3. js按照样板,确定好要绑定的数据,以及绑定的函数
4. json主要是配置文件的作用,也可以存放一些数据源。
app.js\app.json\app.wxss:顾名思义,他们主要是app的全局配置,需要注意的是新建的pages需要在app.json中注册。
下面是常用接口的调用方法示例
1:加载框的show和hide
wx.showLoading({
title: '加载中',
icon: 'loading',
})
wx.hideLoading()
2:http请求
wx.request({
url: 'http://xxx.com',
data: {
current_page: 1,
page_size: 10
},
header: {
'content-type': 'application/x-www-form-urlencoded' //默认值是json
},
method: 'POST', //请求方式
success: res => {
if (res.data.list.length == 0) {
//提示框
wx.showToast({
title: '没有更多',
duration: 500
})
}
Array.prototype.push.apply(this.data.list, res.data.list)
this.setData({
'list': this.data.list
});
}
})
3:切换tabBar时的监听
onShow: function() {
//TO DO
}
4:调用自定义云函数
wx.cloud.callFunction({
name: 'sum',
data: {
a: 5,
b: 3
},
success: res => {
console.log('sum:', res.result.sum)
}
})