小程序全局配置
app.json
pages≈vue中导入页面
{
"pages": [ //路径页面 在开发者工具中Ctrl+S保存后会自动在相应目录下创建该文件
"pages/index/index",
"pages/img/img",
"pages/mine/mine",
"pages/search/search",
"pages/logs/logs"
],
"window": { //导航栏标题
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": true,//下拉刷新
"backgroundColorTop": "yellow"//
},
"tabBar": { //导航栏配置 最多5个
"list": [{
"pagePath": "pages/index/index", //页面路径
"text": "首页",//标题
"iconPath": "icon/_home.png",//未选中时图标
"selectedIconPath": "icon/home.png"//选中时图标
},
{
"pagePath": "pages/img/img",
"text": "图片",
"iconPath": "icon/_img.png",
"selectedIconPath": "icon/img.png"
},
{
"pagePath": "pages/mine/mine",
"text": "图片",
"iconPath": "icon/_my.png",
"selectedIconPath": "icon/my.png"
},
{
"pagePath": "pages/search/search",
"text": "图片",
"iconPath": "icon/_search.png",
"selectedIconPath": "icon/search.png"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
循环数组或对象
//js中数据
Page({
data:{
user:{
name:'zs',
age:12
},
list:[{
id:0,
name:'猪八戒'
},
{
id:1,
name:'天蓬元帅'
},]
}
})
//页面配置
//<text>==<span> <view>==<div>
//循环数组
// wx:for-item='循环项的名称' wx:for-index='循环项的索引' 多层循环时不要重名
// 当为单循环时 wx:for-item='' wx:for-index='' 可省略 因为这是默认的
// 当数组为普通数组时如[1,2,3] 可设wx:key='*this' *this为循环项
<view wx:for='list' wx:for-item='item' wx:for-index='index' wx:key='id'>
<text>索引为:{{index}}</text>
<text>名为:{{item.name}}</text>
</view>
//循环数组
//wx:for-item='对象的值' wx:for-index='对象的属性'
<view wx:for="{{user}}" wx:for-item="val" wx:for-index="key" wx:key="name">
//该对象中name为唯一字符串 所以可以作key值
{{key}} {{val}}
</view>
block标签 只在代码段中显示 渲染到页面时该标签会移除
<block wx:for="{{user}}" wx:for-item="val" wx:for-index="attr" wx:key="name">
<view>{{attr}} {{val}}<view>
</block>
包裹标签为block时
包裹标签为view时
綁定事件
input绑定事件
//bindinput
<input type="text" bindinput="handinput" /> //input标签结尾要+ /
//js中
Page({
data:{
msg:0,
},
handinput(e){
this.setData({
msg:e.detail.value//将input中输入的值赋给msg
})
},
})
click事件绑定
//在dataset中绑定名为item的属性
<button bindtap='add' data-item='{{1}}'>+</button>
<button bindtap='add' data-item='{{-1}}'>-</button>
Page({
data:{
msg:0,
},
add(e:any){ //在没有传参的情况下默认接收的为触发事件的元素 e=触发事件的元素
const a:number=e.currentTarget.dataset.item//小程序中不能直接进行传参
this.setData({
msg:Number(this.data.msg)+a
})
}
})
新建组件
在wx开发者工具相应文件夹处右击选择新建Component
如下为 在Tabs文件夹右击选择新建Component
输入Tabs回车会自动创建如下4个文件
Tabs.json文件中会存在component属性值为true
a.js文件存在3个属性
使用自定义组件
使用组件时要在json文件的usingComponents中添加该组件 属性名=标签名 值=路径
{
"usingComponents": {
"Tabs":"../../components/Tabs/Tabs"
}
}
渲染到页面中
<Tabs></Tabs>
父向子传值
//父 list为子组件要接收的属性名 '{{list}}'=在js data中定义的数值
<Tabs list='{{list}}'></Tabs>
//子 使用js文件的properties属性来接受
properties: {
list:{
type:'' //接受的类型
value:'' // 默认值
}
},
子传父
//父
//wxml
<Tabs list='{{list}}' bindupdatalist='updatalist'></Tabs>
//bind 后的为子组件通过this.triggerEvent接收的方法名字 'updatalist'为父组件js中定义的方法
//js
Page({
data:{
list:[
{
id:0,
name:'首页',
isActive:true
},
{
id:1,
name:'原创',
isActive:false
},
{
id:2,
name:'分类',
isActive:false
},
{
id:3,
name:'关于',
isActive:false
}
]
},
updatalist(e:any){
num=e.detail.num
let list=[...this.data.list] //复制一个新数组
list.map((item,index)=>index===num?item.isActive=true:item.isActive=false)
this.setData({
list
})
}
})
//子
methods:{
handlerclick(e:any){
let {num}=e.target.dataset
this.triggerEvent('updatalist',{num})
//通过this.triggerEvent('父元素绑定到标签上的方法名',要传递参数)来触发父组件的相关方法
},
}
swiper轮播图的使用
<view>
<swiper>//轮播图容器
<swiper-item> //轮播项
//widthFix 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
<image mode="widthFix" src='../../icon/1.png'></image>
</swiper-item>
<swiper-item>
<image mode="widthFix" src='../../icon/1.png'></image>
</swiper-item>
<swiper-item>
<image mode="widthFix" src='../../icon/1.png'></image>
</swiper-item>
</swiper>
</view>
解决swiper与图片大小不匹配问题
swiper{
width: 100vw; //设置轮播图宽为全屏
/*因为轮播图容器和轮播内容大小应相等 所以轮播图宽/轮播图高=图片原宽度/图片原宽度 以此公式通过calc()来求轮播图高 注图片为大小为图片原来的大小而不是image标签的大小*/
height: calc(100vw * 472 / 846); //calc(+ - * /)前后必须有空格
}
image{
width: 100%;//使image与轮播图容器大小相同
height: 100%;
}
异步请求 request({})
//安装小城西插件后 可通过wx-request快速创建如下参数 其余可自行查文档
//data-responseType :''中的均为默认参数可省略
wx.request({
url: '', //请求服务器地址
data: {}, //请求的参数
header: {'content-type':'application/json'},//请求头
method: 'GET',//请求方法
dataType: 'json',//返回的数据格式
responseType: 'text',//相应的数据类型
success: (result)=>{//成功回调
},
fail: ()=>{},//失败回调
complete: ()=>{}//成功,失败都执行
});
}
封装一个Promise方便request复用
//新建一个js文件
export default request=(parms)=>{ //向外导出回调函数request
return new Promise((resolve,regect)=>{
//resolve成功时返回的值 regect失败时返回的值
wx.request({
...parms,
success: (result) => {
resolve(result)//成功时返回result
},
fail: (err) => {
regect(err) //失败时返回错误信息
},
});
})
}
//调用的js文件
request({//包含要传递的属性 此次仅传递服务器地址其他保持默认
url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'
}).then((data)=>{
this.setData({
swiperlist:data.data.message//更改data中的值
})
})
缓存数据
//存储数据到本地缓存中 'key'为属性名 {}中存放数据 也可以不为对象格式
wx.setStorageSync('key', {});
//从缓存中读取数据 'key'为要查找的属性名
wx.getStorageSync('key');