独立页面设置顶部标题
index.json
"navigationBarTitleText":"个人中心",
设置组件受页面wxss的影响
通常公共样式写在app.wxss中,通常情况开发组件,组件与页面的样式是隔断的,所以会有“app.wxss的样式在组件不起效”的疑问。
设置 在 组件的 json 中设置
"styleIsolation":"apply-shared"
即可让app.wxss样式在该组件生效。
具体的其他情况的值设置,配置位置根据基础库也会有所区别,具体请看文档。
组件设置顶部title
组件生命周期attached设置:
attached:function(){
wx.setNavigationBarTitle({
title: '个人中心',
})
}
页面使用组件的method中的方法
页面中:
// wxml
<component-reset id="componentReset" />
...
// js
onReady(){
this.componentReset=this.selectComponent("#componentReset");
}
onShow(){
this.componentReset.show();//使用组件的show方法
}
页面监听组件事件触发
// 组件
show(){
this.triggerEvent('showHandle');
}
//页面使用
<component-reset bindshowHandle="showHandle"/>
页面A向页面B传值
// pageA.js
wx.navigateTo({
url: 'pageB?id=1',
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromPageA', { data: 'pageA的数据' })
}
})
// pageB.js
Page({
onLoad: function(option){
const eventChannel = this.getOpenerEventChannel()
// 监听pageA的emit事件,获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromPageA', function(data) {
console.log(data) // { data: 'pageA的数据' }
})
}
})
页面A接收来自页面B的值
应用在从A取B拿到值后,返回值到A页面并填充到对应的参数
// pageA.js
wx.navigateTo({
url: 'pageB?id=1',
events: {
// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
acceptDataFromPageB: function(data) {
console.log(data)// {data: item,msg:'pageB的数据'}
this.setData({
pageB:data
})
}
}
})
//pageB.js 选中数据(selectItem)后传值并返回上一步
Page({
selectItem(item){
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('acceptDataFromPageB', {data: item,msg:'pageB的数据'});
wx.navigateBack({
delta: 1,
})
}
})
也可通过设置上一个页面属性向pageA传值:
let pages = getCurrentPages(); //当前页面
let prevPage = pages[pages.length-2]; //上一页面
prevPage.selectBankNoCallback(info)// 触发上一个页面定义的方法 selectBankNoCallback
关闭索引提示
警告信息:
根据 sitemap 的规则[0],当前页面 [pages/index/index] 将被索引
关闭配置:
project.config.json 中 "checkSiteMap"配置为false;
无效的 app.json permission[“scope.userInfo”]
原因:permission目前只需配置scope.userLocation
获取小程序的版本环境
var ev=__wxConfig.envVersion;
// console.log('版本:',ev)
// 版本: ‘develop’, //开发版
// 版本: ‘trial’, //体验版
// 版本: ‘release’, //正式版
style动态
--width--: {{ viewWidth }}px
让view 垂直水平具中
父级设置:
display: flex;
align-items: center;
justify-content: center; //水平
动态改变data
this.setData({
[`pointsLocation.${'name'}`]: res[0]
})
自定义导航
json
"navigationStyle":"custom"
js
getTopTabH(){
const _this=this;
wx.getSystemInfo({
success(res) {
// 获取右上角胶囊的位置信息
let info = wx.getMenuButtonBoundingClientRect()
let CustomBar = info.bottom + info.top - res.statusBarHeight
// let CustomBar = info.bottom
// console.log('设备信息',info,res,CustomBar)
_this.globalData.topTabInfo={
height:CustomBar,//这个基本就是顶部到胶囊下面的距离
titleT:info.top,//标题的定位top位置
titleH:info.height,//标题的高
bottom:info.bottom,
};
}
})
},
获取base64图片数据
chooseImageHandle(callback){
wx.chooseImage({
count: 1,
sizeType:['compressed'],
sourceType:['album', 'camera'],
success:res=>{
const imgPath=res.tempFilePaths[0];
wx.request({
url: imgPath,
method:"GET",
responseType:"arrayBuffer",
success:base64Img=>{
const base64=wx.arrayBufferToBase64(base64Img.data);
callback(base64);
}
})
}
})
},
picker 使用json时
<picker bindchange="pickerChange" data-field="homeOwnship" data-option="homeOwnshipOptions" value="{{formData.homeOwnship}}" range="{{homeOwnshipOptions.arr}}" range-key="name">
<view class="picker {{!formData.homeOwnship?'noPickerData':''}}">
{{homeOwnshipOptions.obj[formData.homeOwnship]}}
</view>
</picker>
const homeOwnship=app.globalData.homeOwnship;
var homeOwnshipArr=[];
for(var key in homeOwnship){
homeOwnshipArr.push({id:key,name:homeOwnship[key]});
}
this.setData({
homeOwnshipOptions:{
arr:homeOwnshipArr,
obj:homeOwnship
}
})
pickerChange(e){
const {field,option} = e.currentTarget.dataset
this.setData({
[`formData.${field}`]: this.data[option].arr[e.detail.value].id
})
},
收起键盘
wx.hideKeyboard()
动画实现
<!--动画元素-->
<view animation="{{animationData}}">
data: {
animationData:{},
}
//实现往上滑入 (下面使用的是height实现,用top也可以实现的 top 0 到100vh)
open(){
var animation = wx.createAnimation({
duration: 300,
timingFunction: 'ease',
})
this.animation = animation;
animation.height('100vh').step();
this.setData({
animationData:animation.export()
})
},
//往下滑出
close(){
this.animation.height('0').step();
this.setData({
animationData:this.animation.export()
})
},
当实现内容高度不确定的
.Mask{// 底部
height: 0;
overflow-y: auto;
position: fixed;
bottom: 0;
width: 100%;
background-color: rgba(0,0,0,0.6);
z-index: 2;
}
.MaskMain{ //内容
position: absolute;
left: 0;
bottom: 0;//当需要内容充满弹窗,这里加top:0 或是直接将mask作为内容就好
right: 0;
background-color: #fff;
border-radius: 16rpx 16rpx 0 0;
}
自定义组件带slot
小程序也可使用类似vue的插槽slot
组件.wxml
<view>
暂无数据
<slot name="content"></slot>
</view>
组件.js
js这里Component的options参数必须要设置,否则使用的时候没有效果
options:{
multipleSlots:true
},
使用:
<comNoData>
<view slot="content">
<text class="peimaryBg radiusLg">立即添加</text>
</view>
</comNoData>
阻止冒泡
catchtap 例如:
<view catchtap="saveImg" class=" button gradientPrimaryBg radiusLg centerText fl">保存图片</view>
图片path地址转base64
let base64Img = 'data:image/jpg;base64,' + wx.getFileSystemManager().readFileSync(path, "base64")
canvas输出图片
wx.canvasToTempFilePath({
canvasId: 'canvasId',
fileType: 'jpg',
quality: 0.8, //图片质量
width: canvasw,
height: this.data.drawHtmlCanvasH,
success: res => {
this.setData({
resCanvasImg:res.tempFilePath
})
}
}, this)
canvas输出base64
此处用的是先输出path,再转base64
let base64Img = 'data:image/jpg;base64,' + wx.getFileSystemManager().readFileSync(path, "base64")