微信小程序动态修改页面标题setNavigationBarTitle
静态 如data.json
{
"navigationBarTitleText": "案例详情"
}
动态 如
wx.setNavigationBarTitle({
title: "案例详情"
})
小程序右上角分享禁用和显示
显示
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
})
禁用
wx.hideShareMenu({
menus: ['shareAppMessage', 'shareTimeline']
})
注意
"shareAppMessage"表示“发送给朋友”按钮，"shareTimeline"表示“分享到朋友圈”按钮
显示“分享到朋友圈”按钮时必须同时显示“发送给朋友”按钮，显示“发送给朋友”按钮时则允许不显示“分享到朋友圈”按钮
微信小程序实现局部下拉刷新
注意 1.使用了scroll-view，是无法触发onPullDownRefresh的。
2.配置文件中的"enablePullDownRefresh": true 是整体下拉，不能实现局部下拉。
<scroll-view
class="order_card scroll_view"
scroll-y="true"
bindrefresherrefresh="bindDownLoad" // 下拉刷新回调
refresher-triggered = "{{isLoading}}" // 下拉刷新状态
refresher-enabled="{{true}}" // 开启下拉刷新
refresher-threshold="{{80}}" // 触发下拉刷新阈值
refresher-background="#999999" // 下拉刷新背景颜色
>
</scroll-view>
Page({
data: {
isLoading: false
},
bindDownLoad: function () {
setTimeout(()=>{
this.setData({
isLoading:false
})
this.searchOrder() // 下拉刷新触发的事件
},2000)
},
})
小程序整体下拉刷新，上拉加载
使用系统提供的onPullDownRefresh、onReachBottom这2个事件，前提需要在app.json或page.json配置文件中设置，才能使用。app.json是全应用的页面都可以使用该事件，page.json则只是对应的页面才可以使用。 可以结合导航栏loading显示正在加载的效果
Page({
data: {
pageNum: 1, // 设置加载的第几次，默认是第一次
isFirstLoad: true, // 用于判断List数组是不是空数组，默认true，空的数组
hasMore: false, // “加载更多”
},
// 下拉刷新
onPullDownRefresh: function () {
// 显示导航栏loading
wx.showNavigationBarLoading();
// 调用接口加载数据
this.loadData();
// 隐藏导航栏loading
wx.hideNavigationBarLoading();
// 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新
wx.stopPullDownRefresh();
},
// 上拉加载
onReachBottom(e) {
let that = this;
if (that.data.hasMore) {
that.setData({
pageNum: that.data.pageNum + 1, // 每次触发上拉事件，把pageNum+1
isFirstLoad: false // 触发到上拉事件，把isFirstLoad设为为false
});
that.loadData();
}
},
})
微信小程序自定义分享标题和图片
developers.weixin.qq.com/community/d…
微信小程序当中有两种分享的方式
1.按钮方式
<button open-type="share"></button>
2.右上方的"..."按钮分享
上面两种方式都是经过onShareAppMessage调用，主要有title、path、imageUrl三个参数，在path可以传递自定义的参数给被分享人，具体的代码如下
Page({
onShareAppMessage(res) {
/*const promise = new Promise(resolve => {
setTimeout(() => {
resolve({
title: '自定义转发标题'
})
}, 2000)
})*/
if (res.from === 'button') { // 方式一
return {
title: '按钮方式的分享',
path: '/page/user?id=123',
imageUrl: 'https://qny.520pinche.com/icon/code.jpg'
}
} else if(res.from === 'menu') { // 方式二
return {
title: '右上方菜单的分享',
path: '/page/user?id=123',
imageUrl: 'https://qny.520pinche.com/icon/code.jpg'
}
}
}
})
微信小程序组件内分享
在组件内写button分享按钮：(加data-xxx来传参)
<button class="share" openType="share" data-title="标题" :data-img="imgpw"></button>
然后页面：
// 自定义分享标题
onShareAppMessage(res) {
if (res.from === 'button') {
console.log(res.target.dataset)//可以查看组件传的参数
return {
title: "自定义标题",
desc: "自定义描述",
imageUrl: res.target.dataset.img,
path: 'page/index/index' //分享页面
}
}
}
注意：imageUrl无法自定义gif动图，支持png和jpg格式
中文转英文
微信小程序怎样创建formdata对象，并通过 wx.request 发送file文件
一、场景
1.业务需求，微信小程序需要选择本地的一张照片file，通过接口发送给服务器。
2.问题：
因涉及到域名安全问题，不能使用 wx.uploadFile 。
微信本身没有FormData对象，无法使用 new FormData
后端接口需要接收一个file, 所以只能想办法，通过wx.request 发送 multipart/form-data 请求
二、解决办法（使用方法）
微信小程序页面跳转传多个参数
传递
wx.navigateTo({
url:'/pages/index/index?obj='+JSON.stringify({a:1,b:2,c:3})
})
获取
接收的页面在onLoad生命周期的 options 参数获取，例如用 obj 携带的 json 参数，那么获取的方法就是
let params = JSON.parse(options.obj)
微信小程序实现图片上传和视频上传功能
自定义组件使用全局样式
developers.weixin.qq.com/miniprogram…
微信小程序查看通讯录 联系人
addressBook() {//通讯录操作
wx.chooseContact({
success: function (res) {
// console.log(res, ‘成功回调’)
},
fail(res) {
// console.log(res, ‘错误回调’)
},
complete(res) {
// console.log(res, ‘结束回调’)
}
})
}
提示：在真机调试才可以看见效果
微信小程序 四 组件的运用 组件的创建和引用、组件的样式、组件的数据与方法和属性、数据监听器（及他的案例）、纯数据字段、组件和组件所在页面的生命周期、插槽、父子组件之间同、behaviors
小程序实现数据双向绑定
小程序中没有自带的数据双向绑定，但利用bindinput、bindchange也能实现数据双向绑定。 wxml
<input name="uname" bindinput="bindInput" type="text" placeholder="请输入用户名" data-item="uname" />
js
bindInput: function(e){
let item=e.currentTarget.dataset.item; //在每个input绑定不同的item作为标识
const user=this.data.user
user[item]=e.detail.value //对象的属性名称是动态判定时，通过方括号标记访问
this.setData({
user
})
}
微信小程序中如何修改数组指定元素（或对象）
微信小程序如何跳转到tabbar页面
微信小程序 弹出层 禁止页面滚动的方法
1.场景
添加自定义的弹出框后，当滚动鼠标时下边的页面也会跟着滚动。
2.解决
为了在遮罩出现的时候禁止用户滑动页面，如下处理： 给这个遮罩层 绑定事件： 使用 catchtouchmove
（1）在弹出层上添加 catchtouchmove=’true’
<!--弹出框 -->
<view class="sh_Model_box" catchtouchmove='true'>
...
</view>
（2）也可以绑定有一个空事件
<view catchtouchmove="noneEnoughPeople">
我是遮罩层
</view>
function noneEnoughPeople(){
console.log('啥也不干就行，空函数哈哈哈');
}
3.注意
开发工具的模拟器上没有效果，必须真机测试，真机上才有效果。
