20210728 小程序依赖安装用npm cnpm可能会出问题
20201204 小程序配置全局分享 邀请人机制
// 设置全局分享
share: function () {
// 监听路由切换 间接实现全局分享
wx.onAppRoute(function (res) {
// 获取加载的页面
let pages = getCurrentPages();
// 获取当前页面的对象
let currPage = pages[pages.length - 1];
let data;
if (currPage) {
// 定义页面参数值
let urlOptions = '';
if(currPage.options){
let keyList = Object.keys(currPage.options);
for(let i=0;i<keyList.length;i++){
let key = keyList[i];
urlOptions+='&'+key+'='+currPage.options[key]
}
}
data = currPage.data;
if (!data.isOverShare) {
data.isOverShare = true;
currPage.onShareAppMessage = function () {
return {
title: '找对象就上云对象',
path: currPage.route+'?shareId=' + getApp().userInfo._id + urlOptions
};
}
}
}
})
},
// 之后在app.js文件中onLaunch函数下调用该方法
20200215 小程序设置锚点
<scroll-view scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true" style="height:100vh">
<view class="recommend-title" id="miao3">为您推荐</view>
<recommend></recommend>
</scroll-view>
20200215 小程序遍历对象属性
<view wx:for="{{obj.basicAttribute}}" wx:for-index="key">{{key}}:{{item}}</view>
20200212 自定义导航栏高度和胶囊高度一致
navMenu: uni.getMenuButtonBoundingClientRect()
<view :style="{marginTop:navMenu.top+'px', height:navMenu.height+'px'}"></view>
navHeight: getApp().statusBarHeight + wx.getMenuButtonBoundingClientRect().top+16
20200122 云函数安装依赖wx-server-sdk
cnpm install --save wx-server-sdk@latest
20200115 子组件如何调用父组件的方法
// 首先得在父组件内将需要调用的方法 暴露出来 如下面的 bind:run="getList"
<specs id="specs" isShow="{{dialog}}" dialogType="4" bind:run="getList"></specs>
// 然后再在子组件内直接取这个run 即可调用父组件的getList方法
this.triggerEvent("run",params)
20200114 父组件如何调用子组件的方法
// 定义id直接获取子组件 然后调用其方法
<specs id="specs"></specs>
this.selectComponent("#specs").getDetail();
20200114 最完美的底部弹框解决方案
<!-- 分享弹框 -->
<view class="popup" catchtouchmove='true' wx:if="{{isShow}}" bindtap="closeShare">
<view class="popup_bottom" catchtap="catchDialog">
<view class="title">
<text></text>分享<image mode="widthFix" class="close" bindtap="closeShare" src="/img/close.png"></image>
</view>
<view class="share">
<button plain="true" open-type="share" data-shareInfo="{{shareInfo}}">
<image src="/img/weixin.png"></image>分享给好友
</button>
<button plain="true" catchtap="openPoster">
<image src="/img/photo.png"></image>生成海报
</button>
</view>
</view>
</view>
// 关闭分享弹框
closeShare() {
this.setData({
isShow: false
})
},
// 虚拟方法 用于控制点击整个页面弹框关闭 而点击下面内容部分不关闭
catchDialog() {},
// 内部所有点击事件用catchtap
20200114 在组件中如何自定义分享内容
正常的操作可以在onShareAppMessage()中完成,但是onShareAppMessage()只能写在page中 , 在自定义组件中无效,在page中也是只有定义了该函数,右上角才会显示转发按钮。
解决办法:1.将要分享的标题图片和路由以对象的形式传给自定义组件,2.自定义组件拿到后再将其暴露出来,3.然后我们再在使用组件的page的onShareAppMessage()去获取该对象
// 引用分享弹框
<share isShow="{{shareDialog}}" shareInfo="{{shareInfo}}"></share>
<image catchtap="openShare" data-obj="{{item}}" src="/img/share.png"></image>
// 打开分享弹框
openShare(e){
let obj = e.currentTarget.dataset.obj
this.setData({
shareDialog:true,
shareInfo:{
title: obj.name,
imageUrl: obj.firstImageItems[0],
path: 'pages/mine/planDetail??planId=' + obj.id,
}
})
},
// 在组件中 接收shareInfo并暴露出来
<button plain="true" open-type="share" data-shareInfo="{{shareInfo}}">分享给好友</button>
// 在原页面 监听分享对象
onShareAppMessage: function (res) {
let shareInfo = res.target.dataset.shareinfo; // 注意这块 你在组件中定义的属性可能包含大写但这边接收统一是全小写的
return {
title: shareInfo.title,
path: shareInfo.path,
imageUrl: shareInfo.imageUrl
}
}
20200113 最完美的小程序轮播图解决方案
<swiper indicator-dots="true" indicator-color="#B2AFAF" indicator-active-color="#FD1D1B" autoplay="true" style="width:100%;height:750rpx">
<block wx:key="{{index}}" wx:for="{{obj.imageItems}}">
<swiper-item>
<image mode="aspectFit" bindtap='previewBanner' data-url='{{item}}' src="{{item}}" style="width:100%;height:100%;"></image>
</swiper-item>
</block>
</swiper>
20200111 canvas在自定义组件中不生效
原因解析:createCanvasContext方法有两个参数,在page页面默认传了一个this,而在组件里面需要手动传入。
解决办法:let ctx = wx.createCanvasContext('shareImg',this) // 后面加个this
20200102 新增编辑成功提示后返回上一页
wx.showToast({
title: '保存成功',
duration: 1000,
success: function () {
setTimeout(function () {
wx.navigateBack()
}, 1000);
}
});
20191225 button内有多个元素时修改其默认样式
<button class='left' open-type="share">
<image src='/img/share.png'></image><text>分享</text>
</button>
.footer .left{
overflow: visible;
line-height: normal;
background: transparent;
padding: 0;
}
.footer button::after {
border: none;
}
20191223 小程序绘制canvas二次打开不显示的问题
原因剖析:用传统的wx:if去控制canvas的显示与隐藏,当第一次canvas绘制完毕后,后面再次无法绘制,因为该对象已存在,所以就为空也就是不显示。
解决办法:用css样式display属性去控制其显示和隐藏,默认进入页面后只绘制一次,后续只进行它的展示与隐藏。