微信小程序项目功能要点总结

一、转发分享

<button   open-type="share" hover-class='none' plain="true">分享</button>

onShareAppMessage: function() {
		if (res.from === 'button') {
			// 来自页面内转发按钮
		}
		return {
			title: "分享",
			path: '/pages/index/index'
		}
	}

如果用mpvue写的换一定不要放到methods里面

		methods: {},
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				// 来自页面内转发按钮
			}
			return {
				title: "分享",
				path: '/pages/detail/main?pid=' + this.LoginInfoId 
			}
		},

去掉微信button的外边框，border：none；等都不起作用，亲测唯有此法如下：

		button::after{
		  border:none;
		}

二、设置系统剪贴板的内容，如复制微信号

<div class="btn" @click="cope_fn">
	<text selectable='true' >点击复制客服微信</text>  
</div>

cope_fn() {
	wx.setClipboardData({
		data: '要复制的内容',
		success: function(res) {
			wx.showToast({
				title: "客服微信号已复制成功",
				icon: 'none', //隐藏微信弹框组件默认的对号
				duration: 1500,
				mask: true
			});
		}
	});
}

三、input输入字数监控和限制

<input type="text" name="title" id="title" v-model="title" maxlength="15" @input='limitWord'><span class="warning_span" v-show="over_num">*标题最多只能输入15个字</span>

limitWord: function(e) {
	let text_num=e.mp.detail.cursor
	if(text_num>=15){
		this.over_num = true;
		let warn1 = setInterval(() => {
		this.over_num=false;
		clearInterval(warn1);
		}, 2000);
	}
},

四、微信小程序支付
关于微信支付接口列表看起来有些复杂，不过对于前端而言到没有什么支付签名的问题。统一下单API等皆由后端调取，最后前端只调下面这个微信API，而且所有参数皆有后端生成订单的接口返回。

wx.requestPayment({
  timeStamp: '',
  nonceStr: '',
  package: '',
  signType: '',
  paySign: '',
  success (res) { },
  fail (res) { }
})

成功支付之后，建议在回调一下后端的支付查询接口，避免出现微信支付成功，而后端订单没有成功的情况。
五、下拉刷新列表
.json配置

{
	"enablePullDownRefresh": true,
	"backgroundTextStyle":"dark"
}

	onPullDownRefresh: function() {
			wx.showNavigationBarLoading(); //在标题栏中显示加
			this.getList();
			let that = this
			setTimeout(function() {
				wx.hideNavigationBarLoading(); //完成停止加载
				wx.stopPullDownRefresh(); //停止下拉刷新
				that.ShowWarn0 = true;
				that.msg = '刷新成功';  //弹框刷新成功
				that.showClose();
			}, 1000);
		},

六、加载分页列表

下策： 滚动到底部加载分页列表
如果需要展示分页的最外层是定位到页面的，触底事件不可用时，使用

	onPageScroll: function(e) {
			if (e.scrollTop <= 0) {
				// 滚动到最顶部
				e.scrollTop = 0;
			} else if (e.scrollTop > this.scrollHeight) {
				// 滚动到最底部
				this.get_pages();  //此处可加载分页
				e.scrollTop = this.scrollHeight;
			}
			if (e.scrollTop > this.scrollTop || e.scrollTop >= this.scrollHeight) {
				//向下滚动
			} else {
				//向上滚动 
			}
			this.scrollHeight = e.scrollTop
		},

上策: 页面上拉触底事件的处理函数，分页

  /*  该页面.json   */
{
   "navigationBarTitleText": "列表页",
   "onReachBottomDistance": 50,    //不可少
   "enablePullDownRefresh": true,
   "usingComponents": {}
}

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  /*  加载分页 */
  },

七、联系客服会话

<button open-type="contact" @contact="handleContact"  hover-class='none' plain="true">客服回话</button>
//或原生
 <button open-type="contact" bindcontact="handleContact"  hover-class='none' plain="true">客服回话</button>

handleContact(e) {
	console.log(e)
}

八、阻止弹框，点击事件穿透
情况一、弹框没有滚动事件

<view class="search_modal_bg" catchtouchmove="touchHandler"></view >

touchHandler() {
	return;
},

或者

<view class="box" catchtouchmove="return"> 
//略
</view>

情况二、若弹框也有滚动事件，点击这里

九、订阅消息

<button  bindtap="warning_set">开播提醒</button>

	warning_set() {
		let that=this
		wx.requestSubscribeMessage({
		  tmplIds: ['必填'],
		  success (res) {

		  }
		})
	},

十、scroll-view 隐藏滚动条

::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}