IT评测·应用市场-qidao123.com技术社区

标题: 微信小程序 [打印本页]
作者: tsx81428    时间: 2024-12-18 08:12
标题: 微信小程序
1app.js

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
  1. App({
  3.   /**
  4.    * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
  5.    */
  6.   onLaunch: function () {
  7.     console.log('初始化');
  8.   },
  10.   /**
  11.    * 当小程序启动，或从后台进入前台显示，会触发 onShow
  12.    */
  13.   onShow: function (options) {
  14.     console.log('页面回来了');
  15.   },
  17.   /**
  18.    * 当小程序从前台进入后台，会触发 onHide
  19.    */
  20.   onHide: function () {
  21.     console.log('页面离开了');
  22.   },
  24.   /**
  25.    * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
  26.    */
  27.   onError: function (msg) {
  28.    
  29.   },
  30.   //全局属性在所有页面下都可以获取
  31. globalData:{
  32.      name:'weixin'
  33. }
  34. })
复制代码
全局属性怎么在别的页面获取呢？
  1. //在.js文件中获取
  2. const app=getApp()
  3. console.log(app.globalData.name);
复制代码
在.js中的data和vue一样，放一些响应是数据，那怎么修改呢？
  1. Page({
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.    name:'老师'
  8.   },
  10.   /**
  11.    * 生命周期函数--监听页面加载
  12.    */
  13.   onLoad(options) {
  14. setTimeout(() => {
  15. //修改数据
  16.      this.setData(
  17.          {
  18.              name:"王五"
  19.          }
  20.      )
  21. }, 3000);
  22.   }
  23. }
复制代码
2数组遍历

微信的数组遍历和vue有点区别
  1.   data: {
  2.    name:'老师',
  3.    books:["三国演义","水浒传","西游记"]
  4.   },
复制代码
  1. <view wx:for="{{books}}">
  2. 书名：{{item}} --{{index}}
  3. </view>
复制代码
wx:for中不用写item和index,默认就存在。当然我们也可以改名

3 变乱 


  1. click(event){
  2.       //获取参数
  3.    console.log(event.currentTarget.dataset.myname);
  4.   }
复制代码
4 获取和设置用户头像和昵称

参考文档：开放本领 / 用户信息 / 获取头像昵称 (qq.com)
.wxml
  1. <!-- 获取用户头像 -->
  2. <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  3.   <image class="avatar" src="{{avatarUrl}}" mode="aspectFit"></image>
  4. </button>
  5. <!-- 获取用户昵称 -->
  6. <view class="inp" wx:if="{{nickName.length===0}}">
  7.     <input type="nickname" class="weui-input" placeholder="请输入昵称" bindblur="changeNickName"/>
  8. </view>
  9. <view wx:else style="text-align: center; margin-top: 50rpx;" >
  10. 您的昵称为：{{nickName}}
  11. </view>
复制代码
.js
  1. const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
  3. Page({
  4.   data: {
  5.     avatarUrl: defaultAvatarUrl,
  6.     nickName:''
  7.   },
  8.   onChooseAvatar(e) {
  9.     const { avatarUrl } = e.detail
  10.     this.setData({
  11.       avatarUrl,
  12.     })
  13.   },
  14.   changeNickName(e){
  15.       const {value} =e.detail
  16.       this.setData({
  17.           nickName:value
  18.       })
  19.       
  20.   }
  21. })
复制代码
.wxss
  1. /* pages/demo/demo.wxss */
  2. .avatar-wrapper{
  3.     width: 200rpx;
  4.     box-sizing: border-box;
  5.     background-color: #fff;
  6. }
  7. .avatar{
  8.   width: 200rpx;
  9.   height: 200rpx;
  10.   border-radius: 100rpx;
  11.   box-sizing: border-box;
  12. }
  14. .weui-input{
  15.     margin:0 auto;
  16.     border: 2rpx solid rgb(131, 130, 130);
  17.     width: 400rpx;
  18.     height: 60rpx;
  19.    
  20. }
复制代码
5小程序登录

参考文档：小程序登录 / 小程序登录 (qq.com)
.js
  1. //登录
  2. goLogin(){
  3. wx.login({
  4.   success: (res) => {
  5.    
  6.     wx.request({
  7.       url: 'http://93vjpu.natappfree.cc/user/user/login',
  8.       data:{
  9.           code: res.code
  10.       },
  11.       method:"POST",
  12.       success(res){
  13. //获取后端返回的token
  14.          console.log(res.data.data.token);
  15.       }
  16.     })
  17.   },
  18. })
  19. }
复制代码
 后端参考：苍穹外卖
6小程序文件上传

  1. <button bindtap="upload">选择并上传文件</button>
复制代码
  1. //文件上传
  2. upload(){
  3.     wx.chooseMedia({
  4.         success(res){
  5.             console.log(res);
  6.             wx.uploadFile({
  7.                 url:'http://localhost:8082/user/user/upload',
  8.                 name: 'file',
  9.                 method:"POST",
  10.                 header:{
  11.                     'content-type':'multipart/form-data'
  12.                 },
  13.                 filePath:res.tempFiles[0].tempFilePath,
  14.                 success(res){
  15.                     console.log(res);
  16.                 },
  17.             })
  18.         }
  19.     })
  20. }
复制代码
后端
  1. @PostMapping("upload")
  2. public Result<String> upload(MultipartFile file){
  3.      log.info("文件上传：{}",file.getOriginalFilename());
  5.      return Result.success();
  6. }
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/) Powered by Discuz! X3.4