微信小程序

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企服之家，中国第一个企服评测及商务社交产业平台。