page
page是小程序的主体内容部分。小程序的页面全部都放在page文件夹下。
utils
utils中的utils.js是写好了的时间js。你可以在其他页面中调用，你就可以获取当前的时间。
例子：
js中：
var util = require('utils.js的路径');
Page({
data: {
},
onLoad: function () {
//调用函数时，传入new Date()参数，返回值是日期和时间
var time = util.formatTime(new Date());
//再通过setData更改Page()里面的data，动态更新页面的数据
this.setData({
time: time
});
}
})
wxml中：
<view>{{time}}</view>
app.js
app.js是用来保存全局变量的一个地方
app.json
app.json中的pages是用来保存所有页面的路径。这样你就可以不用像在html中还要去引用css和js。小程序自动地帮你引用好了。但是有一点是要注意的：pages中的路径不用写后缀名。比如："pages/index/index"。
app.json中的window是用来设置顶部导航栏的样式的。
例子：
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#333d9c",
"navigationBarTitleText": "天宁区互联网12315平台",
"navigationBarTextStyle":"white"
}但是如果你想要改变某个页面的导航栏的名称，直接在那个页面中的json在写："navigationBarTitleText" : "个人中心"
app.json中的tabBar是用来设置底部tab栏
例子：
"tabBar":{
"color": "#816c5b",
"backgroundColor": "#fff",
"selectedColor": "#38429f",
"list":[
{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"/image/home02.png",
"selectedIconPath":"/image/home.png"
},
{
"pagePath":"pages/newPersonalCenter/newPersonalCenter",
"text":"个人中心",
"iconPath":"/image/member.png",
"selectedIconPath": "/image/member02.png"
}
]
}app.wxss
app.wxss是保存全局的样式。你直接在页面中用class就可以了。
project.config.json
project.config.json是用来保存项目的配置文件的。在普通编译中你可以选择添加编译模式，添加你想要直接看到的页面，这个时候project.config.json就会发生变化。
小程序的图片
小程序的图片需要你在外部进行添加，就是要在image文件夹中添加。值得注意的是小程序中，如果你想用背景图，你的背景图的属性写在wxcss中是无效的。你可以选择写在wxml中，比如：在wxmlz中的style写：background-image:url("背景图片的路径")；background-report:no-report;background-size:100%;
小程序wx:if wx:for
wx:if
在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：
<view wx:if="{{condition}}"> True </view>
也可以用 wx:elif 和 wx:else 来添加一个 else 块：
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>三目
<view wx:if="{{you?true:false}}"></view>
wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>小程序的事件
小程序中的事件分为冒泡事件和非冒泡事件：
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，改事件不会向父节点传递。
wxml的冒泡事件有很多种，详细的见小程序开发文档。但用的最多的是tap，tap是手指触摸后马上离开。
事件绑定：
bind：bind事件绑定不会阻止冒泡事件向上冒泡
catch：catch事件绑定可以阻止冒泡事件向上冒泡
小程序的页面跳转
小程序的页面跳转最常用到的是：
1、wx.navigateTo 这个是父级页面跳转到子级页面，可以返回上级页面
2、wx.redirectTo 这个是平级跳转，不可以返回上级页面
3、wx.switchTab 这个是跳转到tabBar页面、
4、wx.navigateBack 这个是从子级页面跳转到父级页面
小程序的轮播
小程序的轮播很简单，就是用小程序中的swiper组件。
例子：
wxml：
<swiper class='swiperContent' indicator-dots="true" autoplay="true" circular="true" indicator-color="rgba(0, 0, 0, 0.45)" indicator-active-color="#28A1EA" interval="3000" duration="500">
<swiper-item bindtap='videoTap' wx:for="{{swiperImgContent}}" wx:key="swiperImg">
<image src='{{item.swiperImg}}' class='swiperImg'></image>
</swiper-item>
</swiper>
js：
onLoad: function(options){
var swiperImgContent=[
{ swiperImg: "/image/swiper01.jpg"},
{ swiperImg: "/image/swiper01.jpg"},
{ swiperImg: "/image/swiper01.jpg"}
]
this.setData({
swiperImgContent : swiperImgContent
});
}
template
template只是一个占位符，在页面响应的时候，template就会消失。template上不能加事件函数
在要引用的wxml中写：
<import src="template的wxml的路径"/>
<template is="template的name" data="{{item}}"/>(data是用来做数据传递的)
比如：
<block wx:for="postList">
<template is="template的name" data="item"/>（如果这里写...item那template里的数据绑定就不要写item.了）
</block>
在要引用的wxss中写：
@import "template的wxss的路径";
！！！js在template中是无效的
自定义属性
自定义属性必须以data开头然后用“-”来连接单词。“-”可以是多个
data-自定义单词="{{}}"
data-自定义单词-自定义单词2="{{}}"
<view catchtap="onPostTap" data-postId="{{item.postId}}">
<template is="postItem" data="...item" />
</view>
传值
url传值父级页面到子级页面
onPostTap: function(e){
var postId = e.currentTarget.dataset.postid;(currentTarget:当前鼠标去点击的组件。对应到这个事例就是view。dataset:所有自定义属性的集合。postid:i要用小写，大写是没有用的，自动转化成小写)
wx.navigateTo({
url:"post-detail/post-detail?id="+postId
})
}
接收
onLoad:function(option){
var postId = option.id;
}
缓存(子级页面到父级页面)
子级页面
wx.setStorageSync('缓存的名称'，需要缓存的数据)
父级页面
var 缓存的名称 = wx.getStorageSync('缓存的名称')
this.setData({
父级页面数据名称 ： 缓存的名称
})
全局的app对象
例子:
app.js
App({
appData:{
// 账户信息
account: ''
}
})
保存数据的页面的js
var app = getApp();
Page({
data:{
userName: ' '
}
input中获取数据：
userNameInput: function(e) {
this.setData({
userName: e.detail.value
});
},
一个点击触发的事件函数中
var userName = this.data.userName;
// 保存用户名
app.appData.account = {
userName: userName
}
})
调用数据页面的js
var app = getApp();
Page({
data:{
userName: ' '
}
onShow: function(){
this.setData({
userName: app.appData.account.userName
})
}
})
调用数据的wxml
<view>{{userName}}</view>
小程序中的登录注册页面和个人中心页面的切换
在app.js中：
appData:{
userinfo: ' '
}
在个人中心js中：
onLoad:function(options){
if(app.appData.userinfo ===' '){
wx.redirectTo({
url:'登录注册页面的路径'
})
}else{
this,setData({
把注册的数据传过来
})
}
}
小程序定时器
小程序定时器是经常用到的，这边就单独的拎出来说一下
js：
countDown: function () {
let that = this;
let second = that.data.second;
that.setData({
timer: setInterval(function () {
second--;
that.setData({
second: second
})
if (second === 0) {
clearInterval(that.data.timer);
that.setData({
waitfinish: true,
finish: false
})
}
}, 1000)
})
},
onShow: function () {
this.countDown();
}
second是你在要用到的读秒，second先在data中声明一下。