折叠面板获取用户信息-坑使用getUserProfile(查改)

[复制链接]
查看1107 | 回复0 | 2022-12-4 22:57:31 | 显示全部楼层 |阅读模式
前言

最近开发一个投票小程序,适合入门练手。

大概实现几点功能:列表展示内容,可展开详情获取用户信息,每个微信用户可限制投票次数管理页面(管理员身份可见),录入管理信息简单的后台接口,投票信息增删查改创建项目

打开官方的微信开发者工具,选择小程序,发现可以使用TypeScript和css预编译,选择TypeScript+Less.

创建小程序,选择typecript+less

进入开发页面,可以发现文件后缀为.ts了。

开发页面

安装一些插件,有些类似vs code,使用方便。自带的代码格式化功能一般,默认切换到prettier.

安装插件

Collapse 折叠面板

找了一下,发现微信没有提供这个组件,先简单手写一个。

折叠面板

<p><pre>    <code>
<view class="home">
  <view class="com-collapse">
    <view class="com-collapse-item" wx:for="{{5}}" wx:key="i" bindtap="onExpand">
      <text class="com-collapse-item-title"> 标题{{item+1}}</text>
      <view class="com-collapse-item-details" style="display: {{display}}">456156</view>
    </view>


  </view>
</view</code></pre></p>
获取用户信息-坑

使用getUserProfile获取用户信息遇到坑了,函数在onLoad以及其他函数调用都不弹窗获取用户信息,只有按钮直接绑定事件才行。

解决:使用wx.showModal手动弹窗

showModal

<p><pre>    <code>  loginModal() {
    const that = this;
    wx.showModal({
      title: "需要授权获取用户信息",
      success: function (res) {
        if (res.confirm) {
          that.getUserProfile();
          //这里是点击了确定以后
          console.log("用户点击确定");
        } else {
          //这里是点击了取消以后
          console.log("用户点击取消");
        }
      },
    });
  },</code></pre></p>
成功获取到用户信息,详情页面基本完成,下一步进行管理页面和接口的开发。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则