1. 授权登录
请参考另一篇博客:https://blog.csdn.net/yuzhiqiang_1/article/details/90379546
以上获取到openId,想获取如头像 名字 城市等详细信息请使用以下代码
wxml:
<!-- 如果只是展示用户头像昵称,可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<!-- 需要使用 button 来授权登录 -->
<button type="primary"
wx:if="{{canIUse}}"
open-type="getUserInfo"
bindgetuserinfo="bindGetUserInfo"
>
授权登录
</button>
<view wx:else>请升级微信版本</view>
js:
var app = getApp(); // 引入app.js
Page({
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad() {
},
bindGetUserInfo: function (e) {
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
wx.setStorageSync("userInfo", e.detail.userInfo);
wx.navigateBack({
delta: 1
});
} else {
wx.showToast({
title: '登陆失败,请授权',
icon: 'none',
duration: 3000
});
}
}
})
},
onLaunch: function () {
// 展示本地存储能力
},
globalData: {
userInfo: null
}
})
2. 分享
var WxParse = require('../wxParse/wxParse.js');
Page({
data: {
},
onShareAppMessage: function () {
let that = this;
return {
title: '分享', // 转发后 所显示的title
path: '/pages/index/index', // 相对的路径
success: (res) => { // 成功后要做的事情
console.log(res.shareTickets[0])
// console.log
wx.getShareInfo({
shareTicket: res.shareTickets[0],
success: (res) => {
that.setData({
isShow: true
})
console.log(that.setData.isShow)
},
fail: function (res) { console.log(res) },
complete: function (res) { console.log(res) }
})
},
fail: function (res) {
// 分享失败
console.log(res)
}
}
}
})
3. 底部菜单
{
"pages": [
"pages/list/list"
// 这是你的页面,上面这个是格式
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "Wafer Quick Start",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
// 这是你的菜单导航
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#11cd6e",
"borderStyle": "white",
"list": [
{
"selectedIconPath": "/pages/images/index.png",
"iconPath": "/pages/images/index.png",
"pagePath": "pages/login/login",
"text": "首页"
},
{
"selectedIconPath": "/pages/images/list.png",
"iconPath": "/pages/images/list.png",
"pagePath": "pages/list/list",
"text": "列表"
},
{
"selectedIconPath": "/pages/images/me.png",
"iconPath": "/pages/images/me.png",
"pagePath": "pages/me/me",
"text": "个人中心"
}
]
}
}
4. 复制
注: 小程序入参 data-[参数],参数不能有大写。在js中e.currentTarget.dataset.参数,就可以拿到值了
wxml:
<text data-text="被复制的文字" bindtap="copy"> 你想复制的文字 </text>
js:
copy: function (e) {
var that = this;
var text = e.currentTarget.dataset.text;
wx.setClipboardData({
data: text,
success: function (res) {
wx.showToast({
title: '复制成功',
icon: 'none',
duration: 1000
})
}
});
}
5. 折叠
说明: 这段是转载的,地址找不到了。
1)selectedFlag 用来判断是否显示/隐藏折叠内容。
2)list01 就是你想循环的数据
3)取第几位显示/隐藏是data-index 这个index控制的,index是入参
wxml:
<view class="page">
<!-- 总数 -->
<view class="li" bindtap='changeToggle'>
<view class="left">总数</view>
<view class="right gray" >8</view>
</view>
<!--分类 -->
<view class="li" data-index="0" bindtap='changeToggle'>
<view class="left">类别1</view>
<view class="right">3 <text class="iconfont {{selectedFlag[0]?'icon-shangjiantou':'icon-xiala'}}"> </text>
</view>
</view>
<view hidden="{{!selectedFlag[0]}}">
<block wx:for="{{list01}}" wx:for-item="item" wx:for-index="index">
<view class="li bg-gray">
<view>展开1</view>
</view>
</block>
</view>
<view class="li" data-index="1" bindtap='changeToggle'>
<view class="left">类别2</view>
<view class="right">0
<text class="iconfont {{selectedFlag[1]?'icon-shangjiantou':'icon-xiala'}}"> </text>
</view>
</view>
<view hidden="{{!selectedFlag[1]}}">
<block wx:for="{{list02}}" wx:for-item="item" wx:for-index="index">
<view class="li bg-gray">
<view>展开2</view>
</view>
</block>
</view>
<view class="li" data-index="2" bindtap='changeToggle'>
<view class="left">类别3</view>
<view class="right red">2
<text class="iconfont {{selectedFlag[2]?'icon-shangjiantou':'icon-xiala'}}"> </text>
</view>
</view>
<view hidden="{{!selectedFlag[2]}}">
<block wx:for="{{list03}}" wx:for-item="item" wx:for-index="index">
<view class="li bg-gray">
<view>展开3</view>
</view>
</block>
</view>
<view class="li" data-index="3" bindtap='changeToggle'>
<view class="left">类别4</view>
<view class="right red">3
<text class="iconfont {{selectedFlag[3]?'icon-shangjiantou':'icon-xiala'}}"> </text>
</view>
</view>
<view hidden="{{!selectedFlag[3]}}">
<block wx:for="{{list04}}" wx:for-item="item" wx:for-index="index">
<view class="li bg-gray">
<view>展开4</view>
<view class="red">展开4右边</view>
</view>
</block>
</view>
</view>
wxss:
/* 列表详情 */
.li {
background-color: #fff;
display: flex;
justify-content: space-between;
font-size: 34rpx;
width: 92%;
padding: 0 4%;
height: 100rpx;
line-height: 100rpx;
border-bottom: 1rpx solid #f1f1f1;
}
.bg-gray{
background-color: #ccc!important;
border-bottom: 1rpx solid #fff!important;
}
.li .icon-xiala ,.icon-shangjiantou {
color: #999;
font-size: 28rpx;
}
.gray {
color: #8e8e8e;
}
.red {
color: #fe2e2e;
}
js:
Page({
data: {
list01: [
{ item_id: 1 }, { item_id: 11 }, { item_id: 11 },
],
list02: [
],
list03: [
{ item_id: 11 }, { item_id: 11 }
],
list04: [
{ item_id: 11 }, { item_id: 11 }, { item_id: 11 }
],
// 展开折叠
selectedFlag: [false, false, false, false],
},
// 展开折叠选择
changeToggle: function (e) {
console.log('e: ' + JSON.stringify(e));
var index = e.currentTarget.dataset.index;
console.log('index:' + index)
if (this.data.selectedFlag[index]) {
this.data.selectedFlag[index] = false;
} else {
this.data.selectedFlag[index] = true;
}
this.setData({
selectedFlag: this.data.selectedFlag
})
},
})