微信小程序【授权登录、分享、底部菜单、复制、折叠】

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
    })
  },

})