-
13739719116
-
-
微信小程序开发新手实战教程
建立便捷项目
app.js就是小程序的脚本代码。我们可以在这个文件中监听并处置小程序的生命周期函数、声明全局变量。调用框架提供更多的多样的 API，例如本例的同步存储及同步加载本地数据。
app.json就是对整个小程序的全局布局。我们可以在这个文件中布局小程序就是由哪些页面共同组成，布局小程序的窗口背景色，布局导航条样式，布局预设标题。特别注意该文件不容嵌入任何注解。
app.wxss就是整个小程序的公共样式表。我们可以在页面组件的 class 属性上轻易采用 app.wxss 中声明的样式规则。
App({
onLaunch: function () {
//调用API从本地内存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登入USB
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
},
onShow:function() {
console.log("show");
},
onHide:function() {
console.log("hide");
}
特别注意必须在 app.js 中登记注册App() ，无法登记注册多个。
onLaunch：程序初始化继续执行，且只继续执行一次。
onShow:程序启动，或从程序后台步入前台时继续执行。
onHide:程序从前台步入后台时继续执行。
可以嵌入任一函数至OBJECT中，采用this出访。
底部导航系统
嵌入images目录，放进图片资源并嵌入主程序页面
嵌入底部导航系统tabBar
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/main/main"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#dddddd",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
"tabBar":{
"color":"#000",
"selectedColor":"#48c33c",
"borderStyle":"block",
"backgroundColor":"#ffffff",
"list":[{
"pagePath":"pages/index/index",
"iconPath":"images/footer/index.png",
"selectedIconPath":"images/footer/indexS.png",
"text":"首页"
},
{
"pagePath":"pages/logs/logs",
"iconPath":"images/footer/logs.png",
"selectedIconPath":"images/footer/logsS.png",
"text":"日志"
},
{
"pagePath":"pages/main/main",
"iconPath":"images/footer/main.png",
"selectedIconPath":"images/footer/mainS.png",
"text":"主程序"
}
]
}
color：文字预设颜色
selectedColor：文字选上颜色
borderStyle：上边框颜色（只积极支持black/white）
backgroundColor：背景色
list：菜单列表
list属性
pagePath：页面路径（须要在pages中初始化）
iconPath：图片路径，大小管制40kb
selectedIconPath：选上样式图片路径，大小管制40kb
text：按钮文字
数据存取
main.js
Page({
data:{
text:"这就是一个页面"
},
onLoad:function(options){
// 页面初始化 options为页面重定向所增添的参数
},
onReady:function(){
// 页面图形顺利完成
},
onShow:function(){
// 页面表明
},
onHide:function(){
// 页面暗藏
},
onUnload:function(){
// 页面停用
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
main.wxml
1
2
3
1
2
3
view组件
flex-direction： row：纵向排序；column：横向排序
justify-content：flex-start：左对齐； flex-end：右对齐；center：母葛氏；space-between：两端集中对齐；space-around：母葛氏集中对齐
align-items：flex-start：横向顶部；flex-end：横向底部；center：横向母葛氏
轮播
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
属性名 类型 默认值 表明
indicator-dots Boolean false 与否表明面板命令点
autoplay Boolean false 与否自动转换
current Number 0 当前所在页面的 index
interval Number 5000 自动转换时间间隔
duration Number 1000 滑动动画时长
bindchange EventHandle current 发生改变时会引爆 change 事件，event.detail = {current: current}
特别注意：其中只可以置放组件，其他节点可以被自动删掉。
仅可以置放在组件中，收录机自动设置为100%。
以获取轮播发生改变事件
listenSwiper:function(e) {
console.log(e)
},
1
2
3
1
2
3
值
Object {target: Object, currentTarget: Object, type: "change", timeStamp: 35345, detail: Object}
currentTarget
:
Object
detail
:
Object
target
:
Object
timeStamp
:
35345
type
:
"change"
__proto__
:
Object
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
图标 icon
type 有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size 预设23px
color 同css的color
进度条
percent Float 并无 百分比0~100
show-info Boolean false 在进度条右侧表明百分比
stroke-width Number 6 进度条线的宽度，单位px
color Color #09BB07 进度条颜色
active Boolean false 进度条从左往右的动画
按钮 button
备注：button-hover 预设为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
按钮页面事件
clickButton: function(e) {
console.log(e);
},
CHECKBOX
存取事件
存取数据
items: [
{
name: 'S',
value: 'S',
checked: 'true'
},
{
name: 'O',
value: 'O'
},
{
name: 'N',
value: 'N'
},
{
name: 'G',
value: 'G'
},
{
name: 'SONG',
value: 'SONG'
}
]
存取监听事件
listenCheckboxChange:function(e) {
console.log(e);
},
至此页面
源代码（Git）：https://github.com/yz-mengxiangsong/wechatDemo.git
数据IDC、软件开发、网站建设开发、系统开发、微信小程序开发、APP移动开发、SAAS定制开发、系统二开等。全行业互联网软件开发解决方案，产品经理一对一沟通需求。