微信小程序学习笔记（一) 初识

基本框架

优缺点

1.优点

①无需下载安装

②触手可及

③用完即走

④跨平台

⑤开放能力

⑥生态体系

⑦用户黏性

2.缺点

①不能推送消息

②没有订阅关系

③没有应用商店

框架

1.逻辑层

处理逻辑业务

JS

2.视图层

渲染页面

描述语言WXML

视图样式WXSS

3.微信小程序框架

=逻辑层+视图层+json配置文件

框架目录

1.框架页面文件

pages目录下

文件类型	是否必填	作用
js	是	页面逻辑
json	否	页面配置
wxml	是	页面结构
wxs	否	小程序脚本语言
wxss	否	页面样式表

2.框架全局文件

app.js: 定义全局数据和函数的使用

app.json: 对五个功能进行设置：配置页面路径、窗口表现、标签导航、网络超时、Debug模式

app.wxss: 样式文件

project.config.json: 个性化配置文件

注册

在app.js中

生命周期函数

文件	作用	触发
onLaunch	监听小程序初始化	一旦初始化完成就触发，只触发一次
onShow	监听小程序的显示	再次打开小程序（由后台转入前台时）
onHide	监听小程序的隐藏	有前台转入后台
onError	监听小程序的错误	脚本或API错误时
onPageNotFound	监听页面是否存在	打开的页面不存在时

在js中调用app.js的全局数据：globalData

var AppInstance=getApp()//获得实例
console.log(AppInstance.globalData)
//可以调用全局数据和自定义的全局函数
//但不要调用生命周期函数
//getApp()获取实例后不要私自调用生命周期函数

//不要再onLoad中调用getCurrentPage()
//因为此时page还没有生成

注册页面的使用

在index.js中

1.page()中

属性	描述
data	页面的初始数据（对象）
onLoad	监听页面加载
onReady	监听页面初次渲染完成
onShow	监听页面显示
onHide	监听页面隐藏
onUnload	监听页面卸载
onPullDownRefresh	监听用户下拉动作
onReachBottom	页面上拉触底事件的处理函数
onShareAppMessage	用户单击右上角分享
onPageScroll	页面滚动触发事件的处理函数
onTabItemTap	当时是tab页时，点击tab时触发

2.页面初始化数据-data

①作为页面的第一次渲染

②以json形式由逻辑层传到渲染层

③数据必须是可以转成json的格式：字符串、数字、布尔值、对象、数组

④渲染界面可以通过WXML对数据进行绑定

3.生命周期函数

①onLoad

一个页面只调用一次

可以用wx.navigateTo和wx.redirectTo及标签中的query接收参数

②onShow

每次打开页面调用

③onReady

一个页面只调用一次，对界面的设置要在onReady之后

④onHide

当调用navigateTo或底部tab(切换页面)时调用

⑤onUnload

当调用redirectTo或navigateBack时调用

⑥onPullDownRefresh

监听用户下拉刷新事件，需要在config的windows选项中开启enablePullDownRefresh

当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新

⑦onShareAppMessage

只有定义了此事件的处理函数，右上角菜单才会显示分享按钮，用户点击分享按钮时会调用此函数。此事件需要返回一个对象参数，用于自定义分享内容

//js
Page({
    onShareAppMessage:function(){
     	return{
            title:'...'//标题
            desc:'...'//描述
            .....
            path:'...'//路径
        }
	}
})

4.页面路由管理

是由微信小程序框架管理的，框架以栈的形式管理所有页面

如：

小程序初始化：新页面入栈

打开新页面：入栈

页面重定向：出栈

页面返回：出栈

tab切换：页面全部出栈，只留下新的tab页面

注意：

① navigateTo，redirectTo只能打开非tabBar页面

② switchTab只能打开tabBar页面（即小程序底部tab标签）

③ reLaunch可以打开任意页面

④ 页面底部的tabBar由页面决定，即只要是定义为 tabBar的页面，底部都有tabBar

⑤ 调用页面路由带的参数可以在目标页面的onLoad中获 取

5.自定义函数

除了初始化数据和生命周期函数，Page中还可以定 义一些特殊的函数：事件处理函数，在渲染层的组件中可以加入事件绑定 ，当达到触发事件时，就会执行Page中定义的事件处 理函数

//wxml文件
<view bindtap=“clickMe”>点我</view>

//js文件
Page({
	clickMe:function() {
		console.log(‘view tap’）
	}
})

6.setData设值函数

Page.prototype.setData()设值函数用于将数据从逻辑层发 送到视图层 ，同时改变对应的this.data的值

setData()参数格式: 接受一个对象，以key, value的形式表示将this.data中的key对应的值改变成value

其中key非常灵活，以数据路径的形式给出，如 array[2].message，a.b.c.d ，并且不需要在this.data中预先定义

<!—wxml-->
<view>{{title}}</view>
<button bindtap="changeText">改变正常数据</button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray">改变数据数据</button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject">改变对象数据</button>
<view>{{newField.text}}</view>
<button bindtap="addNewField">增加新数据</button>

//js
Page({
	data: {
	text: 'init data',
	array:[{text:'init data'}],
	object:{ text:'init data'} 
    },
	changeText:function() {
		//this.data.text='changed data'//错误，不能工作
		this.setData({ text:'changed data'}) },
        changeItemInArray:function() {
        this.setData({ 'array[0].text':'changed data'}) } ,
        changeItemInObject:function() {
        this.setData({ 'object.text':'changed data'}) } ,
        addNewField:function() {
        this.setData({ 'newField.text':'new data'}) 
        }
})

注：

直接修改this.data无效

无法改变页面的状态

还会造成数据不一致

单次设置的数据不能超过1024KB，尽量避免一次 性设置过多的数据

数据绑定

WXML页面的动态数据，来自js文件Page的data

数据绑定就是用双大括号将变量包起来，在WXML中将数据值显示出来

1.组件属性绑定

将data里的数据绑定到微信小程序里

//wxml
<view id="item-{{id}}"></view>

//js
Page({
    data:{
        id:0
    }
})

2.控制属性绑定

用来进行if语句

//wxml
<view wx:if="{{condition}}"></view>

//js
Page({
    data:{
        condition:true
    }
})

3.关键字绑定

常用于组件的一些关键字

像复选框组件一样：checked关键字如果true，则代表复选框选中

<checkbox checked="{{false}}"></checkbox>

4.运算

可以在{{}}中进行运算

支持：三元运算、数学运算、逻辑判断、字符串运算、数据路径运算

//三元
<view hidden="{{flag?true:false}}">Hidden</view>

//数学
//wxml
<view>{{a+b}}+{{c}}</view>
//js
Page({
    data:{
        a:1,
        b:2, 
        c:3
    }
})

//逻辑
<view wx:if="{{len>5}}"></view>

//字符串
<view>{{"hello"+name}}</view>

//数据路径
//wxml
<view>{{object.key}} {{arr[0]}}</view>
//js
Page({
    data:{
        object:{
            key:'sss'
        },
        arr:['hello']
    }
})

条件渲染

1.判断单个组件

wx:if wx:else wx:elif

<view wx:if="{{len>5}}">1</view>
<view wx:elif="{{len>3}}">2</view>
<view wx:else>3</view>

2.判断多个组件

block wx:if

<block wx:if="{{true}}">
    <view>v1</view>
	<view>v2></view>
</block> 

不是一个组件，它是一个包装元素，不会在页面做任何渲染，只接受控制属性,不要再这个标签上绑定其他属性：data-或bindtap等

列表渲染

1.列表渲染单个组件

wx:for

数组当前项的下表变量名默认为index

数组当前项的变量名默认为item

//wxml
<view wx:for="{{arr}}"> 
    {{index}}:{{item.message}}
</view>

//js
Page({
	data:{
		arr:[{
			message:'第0个元素'
		}，{
			message:'第1个元素'
		}]
	}
})

使用wx:for-index和wx:for-item指定当前元素下标变量名和当前元素变量名

<view wx:for="{{arr}}" wx:for-index="idx" wx:for-item="itemname"> 
    {{idx}}:{{itemname.message}}
</view>

2.列表渲染多个组件

block wx:for

<block wx:for="{{[1,2,3]}}">
	<view>{{index}}:</view>
    <view>{{item}}</view>
</block>

3.指定唯一标识符

wx:key

如果列表中项目的位置会动态改变或有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，如：

的输入内容

的选中状态

需用wx:key来指定列表中的唯一标识符

则框架会重新排列，而不是重新创建，提高列表渲染效率

key有两种形式

①字符串：for循环中数组的item表示的属性，是字符串或数值

②保留关键字：*this，代表item本身

<switch wx:for="{{arr}}" wx:key="unique">{{item.id}}</switch>

Page({
	data:{
		arr:[
			{id:5,unique:'u_5'},
			{id:4,unique:'u_4'},
			{id:3,unique:'u_3'},
			{id:2,unique:'u_2'},
			{id:1,unique:'u_1'},	
		]
	}
})

如不提供wx:key，会报warning，如果明确知道该列表是静态或者不必关注其顺序，可忽略

模板

//WXML

//定义模板：name属性
<template name="msgItem">
	<view>
    	<text>{{index}}:{{msg}}</text>
        <text>Time:{{time}}</text>
    </view>
</template>

//使用模板：is属性,再将所需data传入
<template is="msgItem" data="{{item}}" />

//js

Page({
    data:{
        item:{
            index:0,
            msg:'模板'，
            time:'2020-1-26'
        }
    }
})

引用

在WXML中引用

1.import

引用模板文件

<import src="msgItem.wxml" />
<template is="msgItem" data=..... />

2.include

引用除模板文件其余

<include src="header.wxml" />

<!--header.wxml-->
<view>头文件</view>

WXS

是小程序的一种脚本语言，结合WXML文件可以构建页面结构

把原来js文件处理的逻辑，直接放在WXML文件中处理

1.使用方式

①将WXS嵌入到WXML文件中，在WXML的标签内来处理相关逻辑

<!--wxml-->

<wxs module="m1">
var msg="hello";
</wxs>

<view>{{m1.msg}}</view>

②以.wxs后缀的文件独立存在，然后在引入到WXML文件中

.../tools.wxs

<!--wxml-->
<wxs src=".../tools.wxs" module="tools" />
....

2.模块化

①WXS是以模块化的形式存在的，是一个单独的模块

②在一个模块中定义的变量和函数，默认私有，其他模块不可见

③想要对外暴露其变量或函数，需用module.exports

..../comm.wxs
var foo="";
var bar="";
module.exports={
	foo:foo,
	bar:bar
}

3.变量使用

①wxs中变量均为值的引用

②若只声明变量而不赋值，则默认为undefined

4.适用语句

for

for(var i=0;i<10;i++)
{
    if(i==1)continue;
    else {console.log(i);}
}

switch

var s=60;
switch(s){
case "60":
    console.log("优");
    break;
 ...
}

while

while()
{

}

do{

}while();

if

var s=60;
if(s>70){
console.log("优");
}else if....