微信小程序的主要文件介绍:
. js:脚本文件
.json:配置文件
.wxss:样式表文件
.wxml:页面
微信小程序差不多也是和mvc模式差不多的,采用数据和页面分离的模式,在js上写的数据可以放到wxml上面
1 const formatTime = date => { 2 const year = date.getFullYear() 3 const month = date.getMonth() + 1 4 const day = date.getDate() 5 const hour = date.getHours() 6 const minute = date.getMinutes() 7 const second = date.getSeconds() 8 9 return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 10 } 11 12 const formatNumber = n => { 13 n = n.toString() 14 return n[1] ? n : '0' + n 15 } 16 17 module.exports = { 18 formatTime: formatTime 19 }
引用:
1 //logs.js 2 const util = require('../../utils/util.js') 3 4 Page({ 5 data: { 6 logs: [] 7 }, 8 onLoad: function () { 9 this.setData({ 10 logs: (wx.getStorageSync('logs') || []).map(log => { 11 return util.formatTime(new Date(log)) 12 // return '我是时间' 13 }) 14 }) 15 } 16 })
-----------------------------------------------------------------------
调用app.js里面的globalData()的数据:
1 globalData: { userInfo: null, time:'2017-9-22' 4 }
调用:
var data = getApp(); onLoad: function (options) { console.log(data.globalData.time); },
---------------------------------------------------------------------
调用app.js里面的方法:
getUserName: function(){ return '我是函数'; } , globalData: { userInfo: null, time:'2017-9-22' }
调用:
this.setData({ username: data.getUserName() })
跟Java的数据,方法调用差不多。
微信小程序的结构:
小程序的周期:
demo:
温馨提示:代码的末尾千万不要加上;不然会报错!!!还有,没有任何代码的文件也会报错!!!
在页面的json里面,我们直接写配置就行了,不用写window,这是和app.json(全局)的区别
页面结构:
背景那里需要开启下来刷新才能看到。
逻辑层:
app.js是控制整个小程序的生命周期
其他的 index.js是控制页面的生命周期
微信小程序的生命周期:
onLaunch:小程序初始化
onShow:小程序显示
onHide:小程序隐藏
onError:小程序出错
any:其他
页面的生命周期:
data:页面数据
onLoad:监听页面加载
onReady:页面加载成功
onShow:页面显示
onHide:页面隐藏
onPullDownRefresh:监听页面下来动作
onReachBottom:页面上拉触底
onShareAppMessage:用户点击由上角分享
Any:其他函数
wxml:
- rpx(规定屏幕宽度为750rpx,1rpx=1物理像素)(换算:750/当前宽度 = 比率)
- 样式引入(@import ,“相对路径”)
-选择器的部分支持(.class , #id , element (标签), ::before(第一个) , ::after(最后一个))
flex:
注意:
当flex为横向的时候,他的猪轴就是为x轴,当他为纵向的时候,他的住轴为y轴,相对的就是交叉轴(x,y);
注意!容器(如:view)的属性只能用容器上的,项目(如:text)上的属性只能用项目上的。
循环:
条件循环:
<view wx:if="{{age<80}}"> 小于 </view> <view wx:elif="{{age==80}}"> 等于 </view> <view wx:else="{{age>80}}"> 大于 </view>
for循环:
data: { name: app.globalData.quan, age:80, data:[ {name:'小明',age:'10'}, { name: '小红', age: '11' }, { name: '小黄', age: '12' }, { name: '小良', age: '13' }, { name: '小黑', age: '14' } ] },
或者: