小程序基础

小程序 4 种文件类型

1. json
   配置层
2. js
   逻辑层
3. wxml
4. wxss
   展示层

全局配置

• project.config.json 项目一些的相关信息，一般不会去改
• sitemap.json 对页面的一些描述，对小程序的一些排名

app.json

{
  "pages":[			/* 有几个页面，哪个页面用户最先访问到，哪个页面就放在上面，首页放在最上面 */
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",			// 下拉 loading 的样式，仅支持 dark / light
    "navigationBarBackgroundColor": "#fff",		// 导航条的颜色
    "navigationBarTitleText": "Weixin",		// 顶部标题
    "navigationBarTextStyle":"black"		// 导航条字体颜色，white，black 有效果
  },
  "style": "v2",		// 使用新版小程序的样式，不用老版小程序的样式
  "sitemapLocation": "sitemap.json"			// 当前 sitemap 对应的文件在哪
}

逻辑层

app.js 全局级别的生命周期函数

onLaunch

// 创建一个小程序
App({
	// 生命周期函数指的是在某一时刻会自动执行的函数
	// 在小程序启动的时候，自动执行的函数
	onLaunch(options){}		
})

// options 打印值
{
	path: "pages/index/index",		// 进入页面
	query: {},				// 变量
	scene: 1001			// 场景值
}

• scene 场景值可通过添加编译模式修改

1. 
   

• query 也可通过添加编译模式来增加
  
• 在初次进入小程序会触发 onLaunch 函数，在退出小程序，很短的时间（例如10 分钟）内再次进入小程序不执行 onLaunch 函数，而退出小程序很长时间（例如30分钟）再进入小程序会再次触发 onLaunch 函数

onShow

App({
	// 在小程序重新展示的时候，自动执行的函数
	onShow(options) {}
})

onHide

App({
	// 在小程序取消展示的时候，自动执行的函数
	onHide() {}
})

onError

App({
	// 当脚本执行错误时，自动执行的函数
	onError(msg) {}
})

全局中的自动义方法

App({
	sayHello() {
		console.log('Hello Word!');
	}
})

生命周期函数中直接调用

App({
	onLaunch() {
		this.sayHello();
	}
	sayHello() {
		console.log('Hello Word!');
	}
})

page 中调用

const app = getApp();

Page({
	onLoad() {
		app.sayHello();
	}
})

页面级别生命周期函数

在页面运行的某个时刻会自动执行的函数

onLoad

页面被加载到内存里的时候，或者说页面第一次启动的时候

Page({
	onLoad() {}
})

onShow

页面每次被展示的时候自动执行

Page({
	onShow() {}
})

onHide

页面每次被取消展示的时候自动执行

Page({
	onHide() {}
})

onReady

是页面被加载到内存里的时候，或者说页面第一次启动的时候，并且，页面被渲染完成之后自动执行

Page({
	onReady() {}
})

其他生命周期函数

Page({
	// 每次下拉刷新时执行
	onPullDownRefresh() {
		console.log('onPullDownRefresh');
	},
	// 页面到最底部时会自动执行
	onReachBottom() {
		console.log('onReachBottom');
	},
	// 当你点击分享时自动执行的函数
	onShareAppMessage() {
		console.log('onShareAppMessage');
		return {
			title: 'share',		// 分享的标题
			path: 'pages/index/index'	// 分享的页面
		}
	},
	// 当页面滚动时执行的函数
	onPageScroll() {
		console.log('onPageScroll');
	}
})

小程序数据的绑定和修改

<view bindtap="changeName">
{{name}}
</view>

Page({
	data: {
		name: 'ZhangSan'
	},
	changeName() {
		this.setData({
			name: 'LiSi'
		});
	}
})

小程序的 api

叫 wx 的全局变量有许多的 api 接口

Page({
	onShow() {
		wx.showToast({
			title: 'cool'
		});
		wx.showModal({
			cancelColor: 'black'
		});
		wx.switchTab({
			url: '/pages/logs/logs'
		});
		wx.request({
			url: 'https://www.fastmock.site/mock/aaaaaaaaaaaa/weixin/api/getData',
			success(res) {
				console.log(res);
			}
		});
	}
})

逻辑层和展示层数据联通

// index.js
Page({
	data: {
		showName: true,
		name: 'zs',
		showHelloWorld: true
	},
	handleTap() {
		this.setData({
			showName: false
		});
	}
})

<view wx:if="{{showName}}" bindtap="handleTap">
{{name}}
</view>

<checkbox checked="{{false}}"></checkbox>
<view hidden="{{!showHelloWorld}}">Hello World!</view>

wx:for 循环

// index.js
Page({
	data: {
		users: [{name: 'zhangsan'}, {name: 'lisi'}]
	}
})

<!-- index.wxml -->
<view wx:for="users">
{{item.name}} {{index}}
</view>

item，index 也可以更换名称

<!-- index.wxml -->
<view wx:for="{{users}}" wx:for-item="info" wx:for-index="number">
{{info.name}} {{number}}
</view>

为了提高渲染的效率

<view wx:for="{{users}}" wx:key="*this">
{{item.name}} {{index}}
</view>
<!-- 或者用 属性名来做key值，但是属性值不要有相同 -->
<view wx:for="{{users}}" wx:key="name">
{{item.name}} {{index}}
</view>

block 标签

block 标签只是为了划分区块，并不会在页面中渲染

<block wx:for="{{users}}" wx:key="*this">
	<view>hello</view>
	<view>world</view>
</block>

文件的拆分

include 引入文件

// index.js
Page({
	data: {
		content: 'this is content'
	}
})

<!-- index.wxml -->
<view>header</view>
<include src="./content.wxml">
<view>footer</view>

<!-- content.wxml -->
<view>{{content}}</view>

import

建议使用这种方法

// index.js
Page({
	data: {
		content: 'this is content'
	}
})

<!-- index.wxml -->
<import src="./content.wxml"/>
<view>header</view>
<template is="content" data="{{content}}"/>
<view>footer</view>

<!-- content.wxml -->
<template name="content">
	<view>{{content}}</view>
</template>