微信小程序“我”的界面一些简单功能实现

最新推荐文章于 2023-07-05 15:06:53 发布
最新推荐文章于 2023-07-05 15:06:53 发布
阅读量1.2w 收藏 134
点赞数 9
文章标签： django css javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/soullove01/article/details/106580132
版权

需要实现的功能如下

在这里插入图片描述

第一个“我的报名”

这里可以显示用户报名了多少个活动，点击后跳转到另外一个界面可以详细了解用户报名的详细信息：

首先这里用户授权登陆后，会把用户的登录信息存到缓存区中，获取缓存区中的用户名，作为增删改查数据的唯一标识。

下面是“我的”界面的js代码:

//获取应用实例
const app = getApp()

Page({
  data: {
    userInfo: null,
    menu: [
      { id: '../personal/personal', src: "images/1215892.png", title: "完善信息", height: 0, },
      { id: '../order/order', src: "images/1215856.png", title: "我的圈子", height: 0, },
      { id: '../activitysignup/activitysignup', src: "images/1215860.png", title: "我的报名", height: 0 },
      { id: '../US/US', src: "images/1215861.png", title: "了解我们", height: 0 },
    ],

  },
  goto: function (e) {
    wx.navigateTo({ url: e.currentTarget.id });

  },
  //用户授权后获取用户信息
  getUserInfo: function (e) {
    if (e.detail.userInfo) {
      const { userInfo } = e.detail;
      wx.setStorageSync("userinfo", userInfo)
      wx.switchTab({
        url: '../index/index'
      })
    } else {
      //用户按了拒绝按钮
      wx.showModal({
        title: '警告',
        content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
        showCancel: false,
        confirmText: '返回授权',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击了“返回授权”')
          }
        }
      })
    }

  },
  /**
     * 生命周期函数--监听页面加载
     */
  onLoad: function (options) {
    var that = this
    //从缓存中获取用户信息
    var userInfo = wx.getStorageSync('userinfo')
    //获取用户名
    var uname = userInfo.nickName
    //对后台发送请求把计算后报名活动的总数返回到页面
    wx.request({
      url: 'http://127.0.0.1:8000/count/',
      data: { username: uname },
      method: "POST",
      //发送post请求，一定要加上以下这句代码
      header: { "Content-Type": "application/x-www-form-urlencoded" },
      success: res => {
        that.setData({
        //把后台返回的值赋值给count
          count: res.data
        })
        //打印出数据
        console.log(res.data)
      }
    })
  },
  //把用户信息存到缓存区
  onShow() {
    const userInfo = wx.getStorageSync("userinfo");
    this.setData({ userInfo })
  }
})

把count的值显示到页面上

<!--user.wxml-->
<view class="user_info_wrap">
  <view class="user_img_wrap" >
    <image class="user_bg" wx:if="{{userInfo.avatarUrl != null}}" src="{{userInfo.avatarUrl}}"/>
    <view class="user_bg1" wx:if="{{userInfo.avatarUrl == null}}"></view>
    <view class="user_info">
      <image wx:if="{{userInfo.avatarUrl != null}}" src="{{userInfo.avatarUrl}}" class="user_icon"></image>
      <image wx:if="{{userInfo.avatarUrl == null}}" src="../../images/a4.png" class="user_icon"></image>
      <view class="user_name">
      {{userInfo.nickName}}
      <button class="weui-btn" type="primary" wx:if="{{userInfo.avatarUrl == null}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo">授权登录</button>
      </view>
    </view>
  </view>
</view>

<view class="user-content">
  <view class="user-main">
    <view class="history_wrap" >
    <!--显示活动报名的总数-->
      <navigator url="/pages/activitysignup/activitysignup">
        <view class="his_num">{{count}}</view>
        <view class="his_name">我的报名</view>
      </navigator>
      <navigator url="../order/order">
        <view class="his_num"> 0</view>
        <view class="his_name">我的发布</view>
      </navigator>
      <navigator url="../order/order">
        <view class="his_num"> 0</view>
        <view class="his_name">我的足迹</view>
      </navigator>
    </view>
  </view>
</view>


<!--菜单显示页面 -->
<view  wx:for="{{menu}}" wx:key="menu" id = '{{item.id}}' bindtap='goto'>
  <view id='menu'>
    <image src='{{item.src}}'></image>
    <text id='title'>{{item.title}}</text>
    <text id='otherInfo'>{{item.otherInfo}}</text>
    <text id='sign'> > </text>
    <text id='info' style='height:{{item.height}}rpx'></text>
  </view>
</view>

** 后台定义了查询计算活动总数的方法，这里是采用了django作为后台**

#在views.py定义一下方法
def count(request):
	#获取请求携带的用户名取出来
    name = request.POST.get("username")
    conn = pymysql.connect(host='localhost', port=3306,user='root', passwd='root', db='xcx', charset='utf8')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    #把计算后的活动总数赋值给num
    num = cursor.execute("select *  from zt where user=%s", [name])
    conn.commit()
    cursor.close()
    conn.close()
    #向小程序页面返回num的值
    return HttpResponse(num, content_type="application/json , charset=utf-8")
    
    #urls.py:
    urlpatterns = [
		url(r'count/', views.count),
    ]

后台返回的值：
在这里插入图片描述

根据用户名与各活动对应的id设计，名为zt的数据表如下：

在这里插入图片描述

第二个“我的报名”活动详情页面

简单的界面设计：

在这里插入图片描述

wxml代码：

<!--pages/activitysignup.wxml-->
<!--定义一个可滑动界面-->
<scroll-view class="content" scroll-y="true">
      <!--遍历取到的活动信息-->
      <view class="content_item" wx:for="{{activitylist}}">
      <!--点击可跳转到对应id的活动-->
        <navigator url="/pages/detail/detail?id={{item.id}}">
          <image src="{{item.url}}"></image>
          <view class="content_text">
            <view><text>{{item.text}}</text></view>
            <view><text>{{item.time}}</text></view>
          </view>  
        </navigator>
      </view>
    
  </scroll-view>

wxcss代码：

/* pages/activitysignup.wxss */
.content{
  width: 100%;
  height: 100%;
}
.content_item{
  width: 100%;
}
.content_item image{
  width: 60px;
  height: 60px;
  float: left;
}
.content_text{
  width:230px;
  height: 60px;
  margin-top: 5px;
  margin-left: 20px;
  float: left;
  font-size: 14px;
  font-family: "楷体";
  font-weight: bold;
}

js代码：

// pages/activitysignup.js
Page({

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    var userInfo = wx.getStorageSync('userinfo')
    var uname = userInfo.nickName
    wx.request({
      url: 'http://127.0.0.1:8000/query/',
      data: { username: uname },
      method: "POST",
      header: { "Content-Type": "application/x-www-form-urlencoded" },
      success: res => {
        that.setData({
          activitylist: res.data
        })
        console.log(res.data)
      }
    })
  },

})

django代码：
根据所有活动“activity”数据表和用户报名表“zt”的对应的id和用户名进行查询用户的所有报名信息，把查询到的信息赋值给book，然后以json格式返回小程序页面

def query(request):
    name=request.POST.get("username")
    conn = pymysql.connect(host='localhost', port=3306, user='root', passwd='root', db='xcx', charset='utf8')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute("select * from activity join zt on id = activity_id where user='%s'"% (name))
    # 获取返回信息
    book = cursor.fetchall()
    conn.commit()
    cursor.close()
    conn.close()
    return  HttpResponse(json.dumps(book, ensure_ascii=False),content_type="application/json , charset=utf-8")

activity数据表的设计

在这里插入图片描述

小程序取到数据后打印出来，查看是否拿到数据

在这里插入图片描述

报名活动界面

不管是获取报名活动信息，还是总数，首先要判断，哪些活动是用户已报名的，所以在报名界面的按钮上绑定了一些方法，如果用户报名了这个活动，就把活动的id和用户名的数据存入到报名表zt里面，反之删除。

报名活动界面的js代码：

Page({
  //点击报名
  addFavorites: function () {
    let listid = this.data.list
    console.log("123:" + listid)
    var key = listid.id
    var value = listid
    var userInfo = wx.getStorageSync('userinfo')
    var uname = userInfo.nickName
    try {
      wx.setStorage({
        key: key,
        data: value,
        success: res => {
          console.log(res.data)
        }
      })
      wx.request({
        url: 'http://127.0.0.1:8000/insert/',
        method: "POST",
        header: { "Content-Type": "application/x-www-form-urlencoded" },
        data: { username: uname, activityid:key},
        success: res => {
          console.log(res.data)
        },
        fail: function () {
          wx.showToast({
            title: '服务器网络错误!',
            icon: 'loading',
            duration: 1500
          })
        },
      })
      console.log("success")
    } catch (e) {
      console.log("false")
    }
    var news = wx.getStorageSync(listid.id)
    console.log("缓存区：" + news)
    this.setData({
      isAdd: true
    })
  },
  //取消报名
  cancelFavorites: function () {
    let list = this.data.list
    var id = list.id
    var userInfo = wx.getStorageSync('userinfo')
    var uname = userInfo.nickName
    wx.request({
      url: 'http://127.0.0.1:8000/delete/',
      method: "POST",
      header: { "Content-Type": "application/x-www-form-urlencoded" },
      data: { username: uname, activityid: id },
      success: res => {
        console.log("删除成功！")
      },
      fail: function () {
        wx.showToast({
          title: '服务器网络错误!',
          icon: 'loading',
          duration: 1500
        })
      },
    })
    wx.removeStorageSync(list.id)
    this.setData({
      isAdd: false
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let id = options.id
    var message = {}
    //检查当前新闻是否在收藏夹中
    var news = wx.getStorageSync(id)
    console.log("news：" + news)
    //已存在
    if (news != '') {
      console.log("缓存取到数据")
      this.setData({
        isAdd: true,
        list: news
      })
    }
    //不存在
    else {
      console.log("后台取到数据")
      wx.request({
        url: 'http://127.0.0.1:8000/test_api/',
        header: {
          'content-type': 'application/json'
        },
        success: res => {
          for (var i = 0; i < res.data.length; i++) {
            if (id == res.data[i].id) {
              message = res.data[i];
              break;
            }
          }
          this.setData({
            list: message,
            isAdd: false,
          })
        }
      })

    }
  },
  
})

django代码：

def insert(request):
    name=request.POST.get("username")
    id = request.POST.get("activityid")
    conn = pymysql.connect(host='localhost', port=3306, user='root', passwd='root', db='xcx', charset='utf8')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute("insert into zt (user,activity_id) value (%s,%s)", [name, id])
    conn.commit()
    cursor.close()
    conn.close()
    return HttpResponse("插入成功！", content_type="application/json , charset=utf-8")

def delete(request):
    name = request.POST.get("username")
    id = request.POST.get("activityid")
    conn = pymysql.connect(host='localhost', port=3306, user='root', passwd='root', db='xcx', charset='utf8')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    count = cursor.execute("delete from zt where user=%s and activity_id=%s", [name, id])
    conn.commit()
    cursor.close()
    conn.close()
    return HttpResponse(0, content_type="application/json , charset=utf-8")

“完善信息”界面

页面设计效果如下：

在这里插入图片描述

首先设计一个用户填写信息的表单，在页面加载的时候会进行查询用户是否之前填写过信息，如有填写过，就把用户信息显示出来，如果没有填写，用户填写后会添加到数据库

wxml代码：
表单绑定一个提交信息的函数formSubmit

<!--pages/personal.wxml-->
<form bindsubmit="formSubmit">
  <view class="weui-cells weui-cells_after-title">
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell_hd">
        <view class="weui-label">姓名:</view>
      </view>
      <view class="weui-cell_bd">
        <input class="weui-input" value="{{list1.realname}}" name="realname" placeholder="请输入真实姓名"/>
      </view>
    </view>

    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">学号:</view>
      </view>
      <view class="weui-cell__bd">
        <input class="weui-input" value="{{list1.student_id}}" name="sid" placeholder="请输入学号"/>
      </view>
    </view>

    <view class="weui-cell weui-cell_input">
      <view class="weui-cell_hd">
        <view class="weui-label">系别:</view>
      </view>
      <view class="weui-cell_bd">
        <input class="weui-input" value="{{list1.dept}}" name="dept" placeholder="请输入系别"/>
      </view>
    </view>

    <view class="weui-cell weui-cell_input">
      <view class="weui-cell_hd">
        <view class="weui-label">专业:</view>
      </view>
      <view class="weui-cell_bd">
        <input class="weui-input" value="{{list1.major}}" name="major" placeholder="请输入专业"/>
      </view>
    </view>

    <view class="weui-cell weui-cell_input">
      <view class="weui-cell_hd">
        <view class="weui-label">性别:</view>
      </view>
      <view class="weui-cell_bd">
        <input class="weui-input"  name="sex" value='{{list1.gender}}'/>
      </view>
    </view>

    <view class="weui-cell weui-cell_input">
      <view class="weui-cell_hd">
        <view class="weui-label">手机:</view>
      </view>
      <view class="weui-cell_bd">
        <input class="weui-input" value="{{list1.telephone}}" name="tel" placeholder="请输入手机号码"/>
      </view>
    </view>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell_hd">
        <view class="weui-label">宿舍:</view>
      </view>
      <view class="weui-cell_bd">
        <input class="weui-input" value="{{list1.dormitory}}" name="dor" placeholder="请输入宿舍号"/>
      </view>
    </view>
  </view>
  <view class="page__bd page__bd_spacing addBtn">
     <button  class="weui-btn" type="primary" formType="submit">提交</button>
  </view>
</form>

wxcss代码：

/* pages/personal.wxss */
.addBtn{
  margin-top: 40rpx;
}

js代码：

// pages/personal.js
Page({
  formSubmit:function(e){
    var userInfo = wx.getStorageSync('userinfo')
    var uname = userInfo.nickName
    console.log(uname)
    console.log(e.detail.value)
    if (e.detail.value.realname.length == 0){
      wx.showToast({
        title: '姓名不能为空！',
        icon: 'none',
        duration:1500
      })
      setTimeout(function(){
        wx.hideToast()
      },2000)
    }
    else if (e.detail.value.sid.length == 0){
      wx.showToast({
        title: '学号不能为空！',
        icon: 'none',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    } else if (e.detail.value.major.length == 0){
      wx.showToast({
        title: '专业不能为空！',
        icon: 'none',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    } else if (e.detail.value.dept.length == 0) {
      wx.showToast({
        title: '系别不能为空！',
        icon: 'none',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    } else if (e.detail.value.tel.length == 0 || e.detail.value.tel.length > 11 || e.detail.value.tel.length < 11) {
      wx.showToast({
        title: '手机号码为空或格式错误！',
        icon: 'none',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    } else if (e.detail.value.dor.length == 0) {
      wx.showToast({
        title: '宿舍号不能为空！',
        icon: 'none',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    }else{
      wx.request({
        url: 'http://127.0.0.1:8000/insertUser/',
        method:"POST",
        header: { "Content-Type": "application/x-www-form-urlencoded" },
        data: { username: uname,realname: e.detail.value.realname, sid: e.detail.value.sid, dept: e.detail.value.dept, major: e.detail.value.major, sex: e.detail.value.sex, tel: e.detail.value.tel, dor: e.detail.value.dor},
        success: res =>{
          console.log(res.data)
            wx.showToast({
              title: '提交成功！',
              duration: 1000
            }) 
        },
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let id = options.id
    var that = this
    var userInfo = wx.getStorageSync('userinfo')
    var uname = userInfo.nickName
    var msg={}
    wx.request({
      url: 'http://127.0.0.1:8000/getUser/',
      data:{username:uname},
      method: "POST",
      header: { "Content-Type": "application/x-www-form-urlencoded" },
      success: res => {
        for (var i = 0; i < res.data.length; i++) {
          if (id == res.data[i].id) {
            msg = res.data[i];
            break;
          }
        }
        that.setData({
          list1: msg,
        })
      }
    }) 
   
  },
})

django代码：

#views.py
#查询用户信息
def getUser(request):
    uname = request.POST.get("username")
    # 连接数据库
    conn = pymysql.connect(host='localhost', port=3306, user="root", passwd="root", db="xcx", charset="utf8")
    # 创建一个cursor对象
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    # 执行sql语句
    cursor.execute("select * from user where username='%s'" % (uname))
    # 获取返回信息
    list1 = cursor.fetchall()
    print(list1)
    # 关闭数据库连接
    cursor.close()
    conn.close()
    return HttpResponse(json.dumps(list1, ensure_ascii=False), content_type="application/json,charset=utf-8")
    
#插入用户信息
def insertUser(request):
    uname = request.POST.get("username")
    ulname = request.POST.get("realname")
    studentid = request.POST.get("sid")
    dep = request.POST.get("dept")
    umajor = request.POST.get("major")
    sex = request.POST.get("sex")
    telnum = request.POST.get("tel")
    dorm = request.POST.get("dor")
    # 连接数据库
    conn = pymysql.connect(host='localhost', port=3306, user="root", passwd="root", db="xcx", charset="utf8")
    # 创建一个cursor对象
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    # 执行sql语句
    cursor.execute("insert into user(username,realname,student_id,dept,major,gender,telephone,dormitory) values(%s,%s,%s,%s,%s,%s,%s,%s)",[uname,ulname,studentid,dep,umajor,sex,telnum,dorm])
    conn.commit()
    # 关闭数据库连接
    cursor.close()
    conn.close()
    return HttpResponse("插入成功！")
    
#urls.py
urlpatterns = [
    url(r'test_api/', views.test_api, name='test_api'),
    url(r'updateUser/', views.updateUser, name='updateUser'),
    url(r'getUser/', views.getUser, name='getUser'),
    url(r'insertUser/',views.insertUser,name='insertUser'),
    url(r'query/', views.query),
    url(r'insert/', views.insert),
    url(r'delete/', views.delete),
    url(r'count/', views.count),
    url(r'^images/(?P<path>.*)$', serve, {'document_root': settings.STATICFILES_DIRS[0]}),
]

user表的设计如下：

在这里插入图片描述

Soul love*
关注
  • 9
    点赞
  • 踩
  • 134
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
微信小程序原生开发功能合集十五：个人主页功能实现
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
05-19 1519
本章个人主页功能实现，展示当前登录用户信息、个人主页、修改密码、浏览记录、我的收藏、常见问题、意见反馈、关于我们等界面及对应功能实现。
微信小程序个人中心、我的界面+源码（示例二）
05-26
界面详情，可点击此链接先进行图片预览： https://img-blog.csdnimg.cn/6bb773fe618348bcae6cafcdeb491b18.jpeg#pic_center 1、微信小程序个人中心、我的界面+源码； 2、实现自定义顶部状态栏； 3、实现滚动显示隐藏顶部状态栏效果； 4、超简单、详细； 5、监听方法，根据需求自行修改跳转路径； 6、本内容提供给需要的用户使用，若存在不足之处，请留言指正或自行修改； 7、通过本源码，可学习到一些基本的微信小程序的布局，提升写代码的效率； 8、适用于学习微信小程序的用户； 9、可以使用于任何需要的小程序首页布局中； 10、喜欢的可以点赞、收藏加关注哦，以免找不到了哦； 11、欢迎使用和留言，谢谢哦！
微信小程序首页界面+源码（示例一）
05-24
界面详情，可点击此链接先进行图片预览： https://img-blog.csdnimg.cn/16b6d967f8aa4d14b05958b43b57535f.jpeg#pic_center 1、微信小程序首页界面布局源码； 2、实现屏幕滚动，顶部搜索栏显示与隐藏； 3、自定义顶部状态栏； 4、实现水平滚动菜单栏； 5、包含每一个按钮或图片的操作监听事件，根据需求可自定义监听跳转的页面路径； 6、本内容提供给需要的用户使用，若存在不足之处，请留言指正或自行修改； 7、通过本源码，可学习到一些基本的微信小程序的布局，提升写代码的效率； 8、适用于学习微信小程序的用户； 9、可以使用于任何需要的小程序首页布局中； 10、喜欢的可以点赞、收藏加关注哦，以免找不到了哦； 11、欢迎使用和留言，谢谢哦！
微信小程序前端界面实现
03-12
微信小程序前端界面实现
微信小程序界面布局
Venus 的博客
08-19 4276
1.组件横向排列 父组件设置属性： display:flex; //弹性布局 flex-direction:row; //布局方向 横向 父组件设置 2.组件纵向排列 父组件设置属性： display:flex; //弹性布局 flex-direction:row; //布局方向 纵向 3.组件重叠排列 子组件都使用 z-index 和 position 配合 z-index 越小越在下面 pos...
我的功能介绍
www2111的博客
10-23 3030
一、我的功能介绍       点击主界面右下角的“我的”进入我的界面     在我的界面里包含我的标注，给予好评，关于我们，退出应用等功能   二、我的标注          该界面显示的是：根目录/BiGeMap/user/kml路径下的一个内容     应用主要显示的是该目录下所有的kml文件，用户可以对文件进行查看、三维地球中查看、发送、删除等操作   三、我的设...
小程序常用接口
GYB4979的博客
02-11 4609
- wx.getAccountInfoSync() 获取当前小程序账号信息，开发者appi;版本等 场景：根据不同测试环境版本的小程序，区别不同的biseUrl域名 获取当前帐号信息。线上小程序版本号仅支持在正式版小程序中获取，开发版和体验版中无法获取。 wx.getAccountInfoSync() - wx.getUpdateManager() 获取全局唯一的版本更新管理器，用于管理小程序更新。 微信文档链接 updateManager.onUpdateReady(function () {
微信小程序开发之——个人中心-框架搭建(3)
我的博客
09-25 1402
一 概述 框架搭建——配置底部切换tabBar 框架搭建——新建首页及个人中心页面 二 配置底部切换tabBar 2.1 tarBar配置文件 app.json 2.2 tarBar添加按钮 "tabBar": { "list": [ { "pagePath": "pages/index/index", "iconPath": "images/home.png", "selectedIconPath": "images/home_s
小白开发微信小程序43--个人中心页面布局2
hqwest的专栏
03-25 756
小白开发微信小程序43--个人中心页面布局2
小程序开发之问题6:使用getAccountInfoSync方法直接获取APPID
张梦兰的博客
09-03 1万+
基于安全和可配置的appid考虑,我们就要避免直接将appid写在app.js里面,这时我们就需要内置方法getAccountInfoSync来实现了 App({ onLaunch: function() { var that = this const accountInfo = wx.getAccountInfoSync() console.log(account...
微信小程序 我厨 tab 界面设计 (源码)
05-31
微信小程序 我厨 tab 界面设计 (源码)微信小程序 我厨 tab 界面设计 (源码)微信小程序 我厨 tab 界面设计 (源码)微信小程序 我厨 tab 界面设计 (源码)微信小程序 我厨 tab 界面设计 (源码)微信小程序 我厨 tab 界面...
微信小程序demo：在线聊天功能(源代码+截图)
06-19
微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+...
微信小程序自定义扫码功能界面的实现代码
10-15
在微信小程序中，自定义扫码功能界面的实现是一项常见的需求，尤其当开发者希望提供更为个性化或集成更多功能的用户体验时。微信小程序不直接支持自定义界面的扫码功能，因此需要利用原生组件来达成目标。以下是一个...
微信小程序踩坑—本地缓存
一叶舟遥
10-18 8030
同一个微信用户，同一个小程序 storage 上限为 10MB。 1.wx.setStorageSync(KEY,DATA)  将data 同步存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容。 var userInfo = res.data.data wx.setStorageSync('userInfo', userInfo) 这里是把服务器返回的用户数据存放到k...
微信小程序获取用户openid
书写人生
05-12 6392
1、wx.login(OBJECT)    调用接口获取登录凭证（code）进而换取用户登录态信息，包括用户的唯一标识（openid） 及本次登录的 会话密钥（session_key）。用户数据的加解密通讯需要依赖会话密钥完成。 2、code 换取 session_key ​  这是一个 HTTPS 接口，开发者服务器使用登录凭证 code 获取 session_key 和 op
获取微信头像和昵称
最新发布
judshv的博客
07-05 761
微信小程序获取用户头像昵称接口经过了调整，具体可参考接下来要讲到获取头像昵称的新规则。
小程序实现漂亮的个人中心版面
热门推荐
沉默的小猴子的博客
03-15 3万+
先放上效果图，然后再解构如何实现。 常见的个人中心内容包括了： 头像，用户昵称，会员信息，充值信息，还有个人设置，收货地址，订单历史，收藏记录，浏览历史等等。 这些板块都可以用组件来实现。 页面逻辑中： 将头像和昵称还有会员信息放在顶部在一个宣传版面展示。剩余的个人中心的功能则单独拿出来做一个列表功能。很多人可能会想到，实现列表功能，列表有多少是不是对应的功能函数就要有多少呢，其实大可不必。除了...
微信小程序实现考试界面的功能代码解释
06-12
实现微信小程序考试界面的功能代码主要包括以下几个部分： 1. 考试题目展示 从数据库中获取考试题目，并且根据题目类型展示不同的界面，例如选择题、填空题、判断题等。可以使用`wx.request`方法向服务器发送请求获取数据，然后使用`wx.navigateTo`方法跳转到考试题目页面。 2. 选择题界面 选择题界面需要展示题目和选项，并且需要处理用户的选择。可以使用`wx:for`指令循环展示选项，并且添加`bindchange`事件处理用户的选择。 3. 填空题界面 填空题界面需要展示题目和填空框，并且需要处理用户的填空。可以使用`wx:for`指令循环展示填空框，并且添加`bindinput`事件处理用户的填空。 4. 判断题界面 判断题界面需要展示题目和选项，并且需要处理用户的选择。可以使用`wx:for`指令循环展示选项，并且添加`bindchange`事件处理用户的选择。 5. 答题结果展示 用户完成答题后，需要展示答题结果和正确答案和解析。可以使用`wx.navigateTo`方法跳转到答题结果页面，并且将答题结果作为参数传递。 以上是实现微信小程序考试界面的主要代码部分，具体实现方式需要根据具体需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值