微信小程序技术文档

article/2025/11/4 12:42:22

1.只显示用户头像和名称（简化代码）

<!-- 如果只是展示用户头像昵称，可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>

使用实例

wxml

<open-data type="userAvatarUrl" class="avatar" ></open-data>
<open-data type="userNickName"></open-data>

wxss

.avatar{border-radius: 45%;width: 90px;height: 90px;display:inline-block;overflow: hidden;
}

使用效果 

2.授权登录

使用wx.getUserProfile

<button bindtap="login">授权登录<button>//绑定点击事件进行登录

// pages/index/index.js
Page({data:{userinfo:''},login(){wx.getUserProfile({desc: '完善资料',success:res=>{//使用es6语法（箭头函数）避免this指向问题，简化代码console.log(res)this.setData({userinfo:res.userInfo})}})}
})
// Page({//   data:{
//   userinfo:''
//   },//   login(){
//    let that=this;//这的this指向page
//    wx.getUserProfile({
//       desc:"获取数据用途"//必填
//       sucess(res){
//           that.setData({//这里不可以使用this，为undefined
//               userinfo:res.userinfo
//          })
//       },
//        fail(res){
//         console.log("授权失败"，res)
//       }
//   })
// })

接着可以在wxml中进行渲染头像和昵称（优化登录进行条件渲染）

<button wx:if="{{!userinfo}}" bindtap="login">授权登录</button>
<view wx:else class="user_wrap"><image class="user_image" src="{{userinfo.avatarUrl}}"></image><view class="user_message"><view class="user_name">{{userinfo.nickName}}</view><view class="user_number"></view></view>
</view>

3.缓存

Page({data:{userinfo:''},onLoad(){let user=wx.getStorageSync('userinfo')//调用缓存wx.getStorageSync('Key')this.setData({userinfo:user})},login(){wx.getUserProfile({desc: '完善资料',success:res=>{            //wx.setStorageSync("Key",value)wx.setStorageSync("userinfo",res.userInfo)//登陆的时候获取缓存，this.setData({userinfo:res.userInfo})}})}
})

4.退出登录

loginout(){this.setData({userinfo:''//清空数据})wx.setStorageSync('userinfo', NULL)//清理缓存
}

5.绑定点击事件获取当前index并对所点击进行选中（选中边框为绿色）

Page({data: {currentindex:''},handletap(e){//点击事件函数this.setData({currentindex:e.currentTarget.dataset.index})},
)}
 <view class="order" bindtap="handletap" data-index="{{index}}""><view class="order_detail {{index===currentindex?'active':''}}"><view class="order_head"></view><view class="order_body"></view></view></view>
.active .order_body{border:rgb(93, 219, 114) solid ;border-top: 0px;
}
.active .order_head{border:rgb(93, 219, 114) solid ;border-bottom: 0px;
}

效果如图

 6.横向滚动视图窗

我写了三层嵌套

    <scroll-view  class="scroll-view_H" scroll-x="true" >/*横向滚动必备*/<view class="bb"><view class="b"></view></view></scroll-view>

样式

.scroll-view_H{display: flex;/*一点要写这两个属性*/white-space:nowrap；
}
.bb{height:120px;display: flex;//一定要写overflow: scroll;/*溢出隐藏*/
}
.b{margin-left: 5px;display: inline-table;//一定要写border-radius: 5%;width: 110px;height: 100%;background-color:#f2f2f7;
}

7.文字居中竖直排列

wxss


.box{text-align: center;display: flex;align-items: center;justify-content: center;
}
.text{writing-mode: vertical-rl;display: inline-block;margin-top: 40px;font-size: 30px; letter-spacing: 20px; color:	#bdbdc0;
}

wxml

<view class="box"><texy class="text">尚无借用设备</texy>
</view>

8.截取后端字符串并展示

<wxs module="subData">module.exports = function (val) {if (val == undefined || val == '' || val == null) {return;}else {return val.substring(5);//从索引5截取字符串}};
</wxs>
<view style="text-align: center;">{{subData(item.time)}}</view>//展示字符串

9.注册

import { request } from "../../request/index.js"
Page({data: {ename:'',xuehao: '',mima: '',phone:'',},//获取姓名getName(event) {console.log('获取输入的姓名', event.detail.value)this.setData({ename: event.detail.value})},//获取学号getXueHao(event) {console.log('获取输入的学号', event.detail.value)this.setData({xuehao: event.detail.value})},// 获取密码getMiMa(event) {console.log('获取输入的密码', event.detail.value)this.setData({mima: event.detail.value})},//获取手机号getPhone(event) {console.log('获取输入的密码', event.detail.value)this.setData({phone: event.detail.value})},//注册功能的实现zhuce(){var that=this;console.log("点击注册")if(that.data.ename!=''&&that.data.xuehao!=''&&that.data.mima!=''&&that.data.phone!=''){request({url:"/UploadUser", data:{name:that.data.ename,stuid:that.data.xuehao,pwd:that.data.mima,phone:that.data.phone},method:'POST', header:{'Content-Type': 'application/json'},}).then(result=>{//页面跳转console.log(result)
//注册失败if(result.data.desc!=="注册成功"){wx.showToast({title: result.data.desc,icon: 'none',duration: 2000//持续的时间})}
//注册成功else{wx.showToast({title: result.data.desc,icon: 'success',duration: 2000,//持续的时间,success: function () {
//延时弹窗setTimeout(function() {wx.redirectTo({url: "/pages/login/login"}, 2000);})}})}})}else{wx.showToast({title: '请全部输入',icon: 'none',duration: 2000//持续的时间})}},})

11.登录

主页js

Page({data:{userinfo:'',loginOK: false,phone:'',xuehao:''},let phone=wx.getStorageSync('phone')//获取缓存中的手机号console.log(phone)this.setData({phone:phone,})let xuehao=wx.getStorageSync('xuehao')console.log(xuehao)this.setData({xuehao:xuehao,})},//去登陆页denglu() {wx.navigateTo({url: '/pages/login/login',})},//去注册页zhuce() {wx.navigateTo({url: '/pages/zhuce/zhuce',})},onShow() {//判断是否需要登录let user = wx.getStorageSync('xuehao')if (user) {this.setData({loginOK: true,})} else {this.setData({loginOK: false})}},})

主页wxml

<view class="me" wx:if="{{!loginOK}}" ><button class="denglu" type="primary" bindtap="denglu" style="background-color: rgb(199, 211, 199);color: rgb(65, 62, 62);margin-bottom: 5px;">登录</button><button class="zhuce" type="primary" bindtap="zhuce" style="background-color: rgb(199, 211, 199);color: rgb(65, 62, 62);">注册</button>
</view>

 登录页面js

登录token

首微信小程序官方文档提供了wx.login
使用wx.login可以获取随机生成的code
然后请求登录接口，向后台发送code，返回的数据，就包含token
我们可以存到本地通过 wx.setStorageSync()，

内含token过期处理

// pages/login/login.js
import { request } from "../../request/index.js";
Page({data: {ename: '',xuehao: '',mima: '',stuid:'',IsAdmin:'',},//获取学号getXueHao(event) {console.log('获取输入的学号', event.detail.value)this.setData({xuehao: event.detail.value})wx.setStorageSync("xuehao", event.detail.value);},// 获取密码getMiMa(event) {console.log('获取输入的密码', event.detail.value)this.setData({mima: event.detail.value})},login() {var that = this;if (that.data.mima == "") {wx.showModal({title: "错误",content: "密码不能为空"});}else {wx.login({       success(res) {if (res.code) {request({url:"/login", data: {code: res.code,stuid: that.data.xuehao,pwd: that.data.mima},method: 'POST',header: {"content-type": "application/json"}}).then(_result=>{console.log('登录返回',_result)var info = _result.data.code;if (info == "401") {wx.showModal({title: "错误",content: "学号或者密码输入不正确"});} else {//登录返回，在里面可以找到后台返回的随机tokenwx.setStorageSync('token', _result.data.token);wx.setStorageSync("stuid", that.data.xuehao);wx.setStorageSync("IsAdmin", _result.data.IsAdmin);wx.setStorageSync("phone", _result.data.phone);wx.setStorageSync("loginOk",true);console.log(wx.getStorageSync('loginOk'))// 页面跳转wx.showToast({title: "登陆成功",icon: 'success',duration: 2000,//持续的时间,success: function () {setTimeout(function() {wx.switchTab({url: "/pages/mine/index"}, 2000);console.log("页面跳转主页");})}})}})            } else {console.log('登录失败！' + res.errMsg)}}})}},})

退出登录清缓存

// pages/logout/logout.js
Page({//清除缓存clear:function(){wx.clearStorageSync();//清除缓存wx.showToast({title: '退出登录成功',icon: 'none',duration: 2000,success: function () {setTimeout(function () {//跳转到首页，强制重启wx.reLaunch({url: '/pages/index/index',})}, 2000);}})
},
})

12封装代码

新建一个request.js文件，

内行token过期和空的处理

export const request=(params)=>{// 公共url// const baseUrl="http://10.117.10.32:8080" //lyq  // const baseUrl="https://xdsbty.cn"   const baseUrl="http:// 10.117.14.61:8080"return new Promise((resolve,reject)=>{wx.request({...params,url: baseUrl+params.url,success:(result)=>{if(result.data=="服务器繁忙解析失败"||result.data.desc=="无token"){console.log("000")wx.showModal({title: '提示',content: '请先登录',                    success(res) {//弹窗后执行if (res.confirm) {wx.navigateTo({url: '/pages/login/login',                        })} else if (res.cancel) {console.log('用户点击取消')}}})}resolve(result);console.log(result)},fail:(err)=>{reject(err);console.log(err)}});})
}
// import { request } from "../../request/index.js";在.js文件中引入
// 使用的时候 request({url:""})// .then(result=>{// 这里相当于wx.request里的 success: (result) =>{}// }) // 使用post request({url:"",data: ,method:"post"})// handlesubmit({
//     const ##=this.data.
// })
// request

在页面中引入即可


import { request } from "../../request/index.js";//引入请求
Page({data: {usedUav:[],stuid:''},onShow(){var that=this;let stuid=wx.getStorageSync('stuid')console.log(stuid)this.setData({stuid:stuid})// 登录则发请求if(wx.getStorageSync('loginOk')){request({url:"/User/GetOwnHistory",header:{'token':wx.getStorageSync("token")},method:'GET',data:{stuid:that.data.stuid},}).then(result=>{console.log(result)if(result.data!=null){this.setData({usedUav:result.data})}})}},
})


http://chatgpt.dhexx.cn/article/RuycTjsm.shtml

相关文章

微信小程序开发者文档 开放文档 地址

微信小程序开发者文档 开放文档 地址

最好的微信小程序开发参考书籍——微信小程序开发者文档 开放文档 微信小程序开发者文档地址 &#x1f9e9;微信官方文档&#xff1a;https://developers.weixin.qq.com/doc
阅读更多...
微信小程序（原生）：基本开发相关文档

微信小程序（原生）：基本开发相关文档

1、微信公众平台&#xff08;后台登录页&#xff09;&#xff1a; https://mp.weixin.qq.com/ 2、微信小程序官网文档&#xff08;组件api等&#xff09;&#xff1a; https://developers.weixin.qq.com/miniprogram/dev/component/audio.html 3、微信开放社区&#xff08;问题…
阅读更多...
【微信小程序】（一）开发工具下载与界面介绍

【微信小程序】（一）开发工具下载与界面介绍

本系列文章主要介绍微信小程序基本的开发流程与基础内容 文章目录 前言 一、安装微信开发者工具 二、开发者工具基本介绍 1.创建项目 2.界面展示 3.目录结构介绍 前言 微信小程序作为一种开发成本低&#xff0c;开发门槛低&#xff0c;周期更短等优势&#xff0c;依托微信生态…
阅读更多...
微信小程序入门文档

微信小程序入门文档

小程序入门文档 微信小程序介绍 微信小程序&#xff0c;简称小程序&#xff0c;英文名Mini Program&#xff0c;是一种不需要下载安装即可使用的应用&#xff0c;它实现了应用“触手可及”的梦想&#xff0c;用户扫一扫或搜一下即可打开应用。 小程序官方文档地址&#xff1a…
阅读更多...
微信小程序开发之官方文档学习（一）

微信小程序开发之官方文档学习（一）

小程序宿主环境 渲染层和逻辑层 小程序的运行环境分成渲染层和逻辑层&#xff1a;WXML 模板和 WXSS 样式工作在渲染层&#xff0c;JS 脚本工作在逻辑层。渲染层和数据相关&#xff1b;逻辑层负责产生、处理数据&#xff0c;通过 Page 实例的 data 属性传递数据到渲染层。 通信模…
阅读更多...
微信-小程序-开发文档-开发：开发

微信-小程序-开发文档-开发：开发

ylbtech-微信-小程序-开发文档-开发&#xff1a;开发 1. 开发指南返回顶部 1.1、 小程序提供了一个简单、高效的应用开发框架和丰富的组件及API&#xff0c;帮助开发者在微信中开发具有原生 APP 体验的服务。 本章分主题的介绍了小程序的开发语言、框架、能力、调试等内容&…
阅读更多...
微信小程序设计规范(官方)文档

微信小程序设计规范(官方)文档

为方便设计师进行设计&#xff0c;微信提供一套可供Web设计和小程序使用的基础控件库&#xff1b;同时提供方便开发者调用的资源。 基础样式库预览地址&#xff1a;https://weui.io 文末附规范文档PSD和sketch源文件下载。 视觉规范 1. 字体规范 常用字号为20&#xff0c;18…
阅读更多...
微信小程序文档api

微信小程序文档api

​ 本文档将带你一步步创建完成一个微信小程序&#xff0c;并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像&#xff0c;点击头像&#xff0c;可以在新开的页面中查看当前小程序的启动日志。下载源码 1. 获取微信小程序的AppID …
阅读更多...
微信小程序设计文档

微信小程序设计文档

小程序方案设计 我设计的小程序名字叫“运动之参天大树”&#xff0c;大体上是想设计一个通过运动来种树的小程序。用户注册之后&#xff0c;可以在喜欢的地方种树&#xff0c;然后连通微信步数来换取浇水的水滴&#xff0c;对树进行浇水&#xff0c;树得到水滴之后会变大&…
阅读更多...
微信小程序开发指南，接口文档，工具下载使用

微信小程序开发指南，接口文档，工具下载使用

相信前天&#xff0c;从事互联网行业人的朋友圈给刷爆了&#xff0c;前微信公众平台开始陆续对外发送小程序内测邀请&#xff0c;而小程序即被外界广为关注的微信“应用号”。 小程序的推出也并非一蹴而就&#xff0c;早在2016年1月的微信公开课上&#xff0c;微信之父张小龙就…
阅读更多...
微信小程序开发官方文档

微信小程序开发官方文档

官方文档教程1&#xff1a;http://bcoder.cn/wxopen/ 官方文档教程2&#xff1a;http://bing.aliaii.com/wxopen/ 本文档将带你一步步创建完成一个微信小程序&#xff0c;并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像&#xf…
阅读更多...
微信小程序官方开发文档

微信小程序官方开发文档

本文档将带你一步步创建完成一个微信小程序&#xff0c;并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像&#xff0c;点击头像&#xff0c;可以在新开的页面中查看当前小程序的启动日志。下载源码 1. 获取微信小程序的 AppID 登…
阅读更多...
小程序开发文档

小程序开发文档

小程序开发总结 最近领导交给一个任务&#xff0c;单独开发一个小程序项目&#xff0c;还要出一篇小程序课题文档。这也是我第一次接触小程序&#xff0c;遂把领导对课题的要求以及自己开发过程中遇到的问题做如下总结&#xff1a; 1. 如何创建小程序项目 这一步在官方文档中…
阅读更多...
微信小程序入门教程

微信小程序入门教程

本文档将带你一步步创建完成一个微信小程序&#xff0c;并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像&#xff0c;点击头像&#xff0c;可以在新开的页面中查看当前小程序的启动日志。下载源码 1. 获取微信小程序的 AppID 如…
阅读更多...
HTML 前端设置浏览器页签图标设置

HTML 前端设置浏览器页签图标设置

想实现如下效果&#xff1a;修改浏览器页签的图标 话不多说上代码 <!-- 修改页签icon logo --><link rel"shortcut icon" type"image/x-icon" href"images/logo.png"></link> 直接在html中head头部里修改如上代码href替换成相…
阅读更多...
webassmbly blazor实现多页签效果

webassmbly blazor实现多页签效果

最终效果如上图。 多页签使用BlazorStrap中的BSTabGroup、BSTabList组件&#xff0c;内嵌绑定的BSTab: <div><NavMenu OnShowLog"ShowLog" OnShowModel"ShowModel" /> </div> <div class"container"><BSTabGroup S…
阅读更多...
Vue的多页签组件

Vue的多页签组件

先直接看组件代码&#xff08;里面用了一些element-ui的组件&#xff0c;如果你们不用element-ui的话。可以去掉&#xff0c;自己实现&#xff09; 也可以下载Demohttps://download.csdn.net/download/rui1120119095/14155951 <template> <div class"__commo…
阅读更多...
XSSFWorkbook导出多一个Sheet页签

XSSFWorkbook导出多一个Sheet页签

问题&#xff1a;使用XSSFWorkbook导出Excel多出一个不必要Sheet页。 问题原因&#xff1a;open(FileInputStream s)打开Excel模板时会默认打开一个Sheet页&#xff08;多余的那个Sheet页&#xff09;&#xff08;该Sheet页打开顺序&#xff1a;模板第一格显示的Sheet页->模…
阅读更多...
VUEcli3设置页签图标

VUEcli3设置页签图标

vuecli3设置网页页签图标非常简单&#xff0c;三步 1.将ico格式的页签图片放置public文件夹目录下 2.在public文件夹目录下的index.html中配置页签图标 3.在vue.config.js中配置下&#xff0c;配置好了重启下项目就行了。 效果
阅读更多...
antd-design-pro实现多页签，切换页签保留缓存，keep-alive

antd-design-pro实现多页签，切换页签保留缓存，keep-alive

感谢该大佬提供的组件&#xff1a;GitHub - CJY0208/react-activation: Hack <KeepAlive /> for React react 里 keep-alive 的实现目前是黑科技&#xff0c;会有些问题 使用过程中遇到问题的话&#xff0c;可以优先看这儿 https://github.com/CJY0208/react-activatio…
阅读更多...
推荐文章

Copyright @ 2022~2023