微信小程序开发基础
开发基础
文件介绍
app.json文件介绍
pages字段:⽤于描述当前⼩程序所有⻚⾯路径,这是为了让微信客⼾端知道当前你的⼩程序 ⻚⾯定义在哪个⽬录
windows字段:
定义小程序所有页面的额顶部背景颜色,文字颜色定义等
tabbar字段
page.json 页面配置
我们可以在这些文件中增加属性,从而层叠掉我们在app.json中写的全局配置,这里相当于给每个文件不同的配置
页面配置小结
配置app.json文件内的list
list负责的是小程序下方的导航栏
详细的参数见微信开放文档
跳转链接
swiper 滑块视图容器
跳转链接
演示:
常用属性
indicator-dots:是否显示面板指示点
indicator-color:指示点的颜色
indicator-active-color:当前选中的指示点的颜色
autoplay:是否自动切换
circular:是否采用协接滑动
interval:自动切换时间间隔
进度条
<!-- progress 进度条 -->
<progress percent="80"></progress>
<progress percent="40" show-info="true"></progress>
<progress percent="80" show-info="true" active="ture"></progress>
<icon type="success" size="40"></icon>
<icon type="success_no_circle"></icon>
<icon type="info"></icon>
<icon type="warn"></icon>
<icon type="waiting"></icon>
逻辑层和渲染层分离
小程序的运行环境分为两个层:渲染层和逻辑层
逻辑文件:app.js和pages.js
app.js:小程序逻辑
每个小程序都需要在app.js内调用APP方法注册小程序实例,绑定生命周期回调函数,错误监听和页面不存在的监听函数等
最开始的app.js文件
// app.js
App({
//生命周期回调--监听小程序初始化
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
//全局变量:可以实现值的页面共享
globalData: {
userInfo: null
}
})
index.wxml文件
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
这样在点击登录按钮后,可以获得用户的头像和昵称
要点
//app.js
/**绑定生命周期回调函数、错误监听和页面不存在监听函数
* 1.app.js 小程序 全局逻辑
* 生命周期回调函数:小程序从创建到消失 整个过程 产生的一些函数
* 2.每个小程序的页面 都有js文件 当前的页面逻辑
* 每个页面的js也有生命周期函数 (data页面的数据 生命周期 自定义函数)
* 3.globalData全局变量 :页面共享的值
* 开发者可以通过 getApp 方法获取到全局唯一的 App 实例
* 4.小程序里面没有DOM BOM
* 5.模块--功能块 封装的方法 在外部可以调用
* node.js里面的Common.js规范 (模块导入导出)
* 1.外部定义的方法 需要暴露出接口
* module.exports={
fun:fun,
obj:obj
}
* 2.哪里使用哪里调用外部方法
* var 变量=require('js相对路径.js');
*
*
*/
我们封装一个js文件,在app.js内进行调用
第一种:
//定义函数---封装功能的函数
function fun(){
var a=123;
var b=456;
return a+b;
}
var obj={
name:'hehe',
age:20
}
//暴露出去
//语法: 1.直接暴露函数名字
module.exports=fun;
app.js
//使用外部的js方法 引入进来
var fun=require('utils/fun.js');
console.log(fun);//打印函数
App({
//生命周期回调——监听小程序初始化
onLaunch:function(){
var value=fun();
console.log('使用函数',value);
},
第二种:
function fun(){
var a = 123;
var b = 456;
return a+b;
}
var obj={
name:'hehe',
age:20
}
//暴露出去
// 2.直接暴露对象 {demo(变量名):fun,...}
module.exports.demo=fun;//{demo:fun}
app.js
var fun = require('./utils/fun.js');
console.log(fun);
App({
onLaunch:function(){
console.log('生命周期回调——监听小程序初始化');
var value = fun.demo();
console.log('使用函数',value);
},
数据的简单绑定
在index.js内
data: {
msg:'hello小程序',
active:'Active'
},
index.wxss
/* pages/index/index.wxss */
.Active{
color: aqua;
}
在index.wxml
<!-- 显示数据
--双大括号用于绑定小程序
-- 数据绑定语法可以写在属性里面
-->
<view>{{msg}}</view>
<view class="box {{active}}">数据绑定</view>
将多选框的状态设置为选中
<checkbox checked="{{true}}">吃瓜</checkbox>
列表渲染
wx:for
在组件上使用wx:for控制属性绑定一个数组,即可以使用数组的各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item
index.js
data: {
array:[{
message:'foo',
},{
message:'bar'
}],
arr:[10,20,30,'hello','开心吗'],
msg:'hello小程序',
active:'Active'
},
index.wxml
<!--
列表渲染:
wx:for='{{数组名字}}' index下标 item数组遍历的每一项值
-->
<view wx:for="{{array}}">
{{index}}:{{item.message}}
</view>
<view wx:for="{{arr}}">
{{item}}---{{index}}
</view>
这样会给一个警告
我们可以添加一个wx:key将其消除
修改之后的代码:
<view wx:for="{{array}}" wx:key="index">
{{index}}:{{item.message}}
</view>
<view wx:for="{{arr}}" wx:key="index">
{{item}}---{{index}}
</view>
修改每一项的变量名和下标名
我们也可以使用wx:for-item去指定数组当前元素的变量名
可以使用wx:for-index去指定数组当前下标的变量名
<view wx:for="{{arr}}" wx:for-item="idx" wx:for-index="i" wx:key="index">
{{idx}}:--:{{i}}
</view>
我们一般 不修改item index
什么时候必须修改?
遍历数据wx:for 两层嵌套的时候必须修改
输出一个九九乘法表演示一下:
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i" wx:key="index">
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j" wx:key="index">
<view wx:if="{{i<=j}}">
{{i}}*{{j}} = {{i * j}}
</view>
</view>
</view>
列表渲染数组
data: {
books:[
{
id:1,
bookname:'三国演义',
price:20
},
{
id:2,
bookname:'水浒传',
price:30
},
{
id:3,
bookname:'西游记',
price:25
}
]
},
index.wxml
<!--
列表渲染:
wx:for='{{数组名字}}' index下标 item数组遍历的每一项值
-->
<view wx:for="{{books}}" wx:key="index">
书名:{{item.bookname}} 价格:{{item.price}}
</view>
组件和导航
条件渲染
在框架中,使用 wx:if="" 来判断是否需要渲染该代码块
我们在index.js的data内定义一个true变量和一个数字变量:
data: {
isShow:true,
length:1
}
在index.wxml页面内进行判断是否需要渲染
<view wx:if="{{isShow}}"> True </view>
<view wx:if="{{length>5}}">1</view>
也可以使用wx:elif和wx:else来添加一个else块:
<view wx:elif="{{length>2}}">2</view>
<view wx:else>3</view>
block wx:if
因为wx:if是一个控制属性,需要将其添加到一个标签上,如果要一次性判断多个组件标签,可以使用block标签将多个组件包装起来,并在上面使用wx:if控制属性
<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
</block>
block不是一个组件,只是一个包装元素,不会再页面上做出任何渲染,只接受控制属性
使用hidden也可以实现隐藏效果
<view hidden="{{true}}">隐藏显示部分</view>
注意:hidden不可以和display一起使用
<view>
<view hidden style="display:flex">1111</view>
</view>
这样使用会显示出“111” 因为hidden的本质就是调用display:none; 如果添加display:flex; 会形成一个代码覆盖
什么是事件
事件时视图层到逻辑层的通讯方式;
事件可以将用户的行为反馈到逻辑层进行处理;
事件可以绑定在组件上,当达到触发事件,就会执行逻辑层的对应的事件处理函数;
事件对象可以携带额外的信息,比如 id,dataset,touches
事件的分类
分为冒泡事假和非冒泡时间
冒泡事件:当一个组件上的事件被触发后,这个事件会向父节点传递
非冒泡事件:当一个组件上的事件被触发后,这个事件不会向父节点传递
冒泡事件
bind+事件名='函数名' 冒泡事件
点击事件
// 点击事件
click:function(){
console.log("被点击的是click点击事件");
},
<view bindtap="click">点击触发事件</view>
父元素事件
// 点击事件
click:function(){
console.log("被点击的是click点击事件");
},
// 父元素事件
parent:function(){
console.log("触发父元素parent事件");
},
<!-- 父元素事件 -->
<view bindtap="parent">
<button bindtap="click">点击触发父元素事件</button>
</view>
点击按钮,会同时触发两个事件,一个点击事件,一个父元素事件
非冒泡事件
catch+事件名 = '函数名' 非冒泡事件
我们使用非冒泡事件对上面的例子重新实验
<!-- 父元素事件 -->
<view bindtap="parent">
<button catchtap="click">点击触发父元素事件</button>
</view>
只调用了被调用的事件
事件传参
<!-- 事件传参
1. 绑定属性 data-属性名='属性值' data-id='123'
2. 参数传递获取属性值 事件对象 event
3. 自定义的数据:
这些自定义数据以 data- 开头,多个单词由连字符 - 连接。
这种写法中,连字符写法会转换成驼峰写法,而大写字符会自动转成小写字符
3.1 data-userName 输出时为username 也就是转为小写
3.2 data-user-name 输出时为userName 也就是转为驼峰
-->
index.wxml:
<view bindtap="demo" data-id="123" data-userName="qq" data-user-name="ww">事件传参</view>
index.js
在data内:
// 事件传参
demo:function(e){
console.log(e.currentTarget.dataset);
},
获取和修改data
index.js
update:function(){
// 这是获取data以及其值的方式 this.data.属性
console.log(this.data);
// 修改data以及其值的方式 要修改的属性:修改后的值
this.setData({
msg:'hello world',
isShow:false
})
},
selectData:function(){
console.log(this.data);
},
index.wxml
<!-- 获取和修改data -->
<button bindtap="update">点击改变msg的值hello</button>
<view>{{msg}}</view>
<button bindtap="selectData">再一次查看data</button>
点击显示或隐藏元素
index.js
// 切换显示隐藏容器
change:function(){
// 让元素显示隐藏切换 -- wx:if='{{isShwo}}'
// 1. 获取默认的data内的属性 isShow的值
// 2. 点击后 对data内的属性isShow取反 重新设置值
var isShow =! this.data.isShow;
this.setData({
isShow:isShow
})
},
index.wxss
.box{
background-color: aqua;
height: 240rpx;
width: 240rpx;
}
index.wxml
<button catchtap="change">点击隐藏box</button>
<view class="box" wx:if="{{isShow}}">显示隐藏</view>
显示效果: