【小程序】小程序技术训练营学习笔记-part2

最新推荐文章于 2024-08-15 23:03:45 发布

dominic_z

最新推荐文章于 2024-08-15 23:03:45 发布

阅读量381

点赞数

分类专栏： web开发

本文链接：https://blog.csdn.net/dominic_z/article/details/104678213

版权

web开发专栏收录该内容

12 篇文章 1 订阅

订阅专栏

个人笔记部分，无参考意义
小程序与JavaScript

JavaScript入门

控制台Console

变量与赋值

这个undefined是console.log()这个函数的返回值，每个函数都有返回值，如果函数没有提供返回值，会返回 undefined。

你会看到一个返回值，就像下面这样
在这里插入图片描述
let是一个新的变量声明方式，以前我只知道var
javascript中let和var的区别
然后我发现了定义变量可以不用var和let
JavaScript中使用var定义变量和不使用var定义变量的区别

 js的变量是否可以删除可以被delete

操作数组

常量

const创建的是只读引用，与java里的final变量一样，引用不可改，但引用的内容可改

全局对象wx

wx提供了很多功能的API接口，文档里说过

大多数 API 都是异步 API，如 wx.request，wx.login 等。这类 API 接口通常都接受一个 Object 类型的参数，这个参数都支持按需指定以下字段来接收接口调用结果

函数需要的参数有
在这里插入图片描述
函数返回的数据为

而success函数就是执行成功时候的回调函数，例如

wx.getNetworkType({
  success(res) {
    console.log(res)
  }
});

控制台会把res打印出来，如下所示

{errMsg: "getNetworkType:ok", networkType: "4g"}

可以看到返回的是一个对象，这个对象有两个属性，这两个属性都是方法调用结束后返回的数据属性名
在比如

wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

上面这个方法还需要url等参数，然后传入的参数的格式和json差不多，注意最后那个success函数的传入方式，也是跟json数据的定义格式差不太多

点击事件

我查了button的文档，并没有看见这个组件下面有叫做bindtap的属性，倒是在公共属性部分，可以看到所有组件都有以下属性bind* / catch*

滚动到指定的选择器的位置这个功能在手机上模拟是可用的，在模拟器上不可用

模态对话框

modalTap(){
    wx.showModal({
      title: '学习声明',
      content: '今天有点烦',
      showCancel:true,
      confirmText:"确定",
      cancelText:'fuck',
      success:function(res){
        if(res.confirm){
          console.log("用户点击确定")
        }else if(res.cancel){
          console.log('cancel')
        }
      }
    })
  },

页面路由

所谓页面路由，我看完教学和案例的理解就是，管理页面的方式
页面路由
由于小程序里显示的页面只有一个，因此正如文档中描述的那样

框架以栈的形式维护了当前的所有页面

栈：先进后出

<button bindtap="navigateTo">保留页面并跳转</button>
<button bindtap="switchTab">跳转到组件Tab页</button>
<button bindtap="redirectTo">关闭当前页面跳转</button>

navigateTo() {
    wx.navigateTo({
        url: '/pages/home/imgshow/imgshow'
    })
},
switchTab() {
    wx.switchTab({
        url: "/pages/list/list",
    })
},
redirectTo() {
    wx.redirectTo({
        url: '/pages/home/imgshow/imgshow'
    })
},

同时imgshow.wxml的页面如下

<button bindtap="navigateBack">返回上一页</button>

navigateBack() {
    wx.navigateBack({
      delta: 1
    })
  }

这里我们对比navigateTo和redirectTo
这是首页
在这里插入图片描述

点击第一个按钮，跳转页面如下所示，下面这两个按钮都可以按，并且能成功返回到home页面
在这里插入图片描述

而如果我们刚刚点了第三个按钮（关闭当前页面跳转），跳转结果如下，点击返回上一页就没办法返回上一页了
在这里插入图片描述
原因文档也写的很清楚：
redirectTo：页面重定向当前页面出栈，新页面入栈（意思hi关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面）
navigateTo：打开新页面新页面入栈（保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面）

页面渲染

响应的布尔操作

this.setData和 this.data都用到了一个关键字this。 this和中文里的“这个的”有类似的指代作用，在方法中， this 指代该方法所属的对象，比如这里的是Page对象， this.data就是指Page函数对象里的data对象。

相应的数组操作

组合数据的时候用的是initData + '\n' + extraLine.join('\n')，但是前端页面的换行也不识别'\n'啊

函数与调用函数

function greet(){
  console.log('hello');
}
greet();

上面就是定义函数对象的方法，运行页面会在console看到hello

在这里插入图片描述
然后我发现啊，js文件里Page是一个对象，传入的参数可以看做一个json对象了，因为他满足{property1:value1,property2:value2}的格式，当定义函数的时候，你可以这么写

Page({
  addLine:function(e){
    extraLine.push('new item');
    this.setData({
      text:initData+'\n'+extraLine.join('\n')
    })
}）

也可以

function add(e){
  extraLine.push('new item');
  this.setData({
    text: initData + '\n' + extraLine.join('\n')
  })
}
Page({
  addLine: add}）

前者是匿名函数，后者给这个函数命了个名

对象方法

let square = function(number) {
  return number * number
};
console.log(square(4))//使用console.log()输出变量square

执行后，可以在控制台看到输出的结果为16。上面这个function函数没有函数名，相当于是把函数的返回值赋值给了变量square。

箭头函数和java的lambda表达式真像

const multiply = (x, y) => {
  return x * y;
}
const sum= (x, y) => x + y;//连{}和return语句都可以省掉
console.log(multiply(20, 4));
console.log(sum(20, 4));

currentTarget事件对象

绑定点击事件的方法就是给组件提供一个bindtap属性并赋值一个函数对象，我发现这个函数对象的参数都被叫做e，意思就是event的意思，他携带了一些关于点击的这个东西本身的信息

<view class="weui-navbar">
    <block wx:for="{{tabs}}" wx:key="index">
        <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
            <view class="weui-navbar__title">{{item}}</view>
        </view>
    </block>
</view>

tabClick: function (e) {
    console.log(e)
    this.setData({
      activeIndex: e.currentTarget.id
    });
  }

e.currentTarget是事件对象的一个属性，表示的是事件绑定的当前组件，也就是那个<view id="{{index}}..."，然后在取id这个属性

事件
当然还有下面一段代码

<view class="weui-tab__panel">
    <view>{{activeIndex != 0}}</view>
    <view hidden="{{activeIndex != 0}}">帝都</view>
    <view hidden="{{activeIndex != 1}}">魔都</view>
    <view hidden="{{activeIndex != 2}}">妖都</view>
    <view hidden="{{activeIndex != 3}}">渔村</view>
</view>

在这里插入图片描述
效果就是根据点击的地方修改下面的文字，hidden属性接受的是bool类型的变量，"{{activeIndex != 3}}"会返回这个值是否等于3的布尔判定结果，但注意，他返回的是true或者false，而并非‘true’这种字符串

组件携带数据dataset

组件携带数据要在组件里按照data-xxx-xxx的格式定义，如

<view id="viewclick" style="background-color: red;padding:20px;" data-sku="100000177760" data-spu="100000177756" data-pid="100000177756" data-toggle="Apple iPhone XR" data-jd-color="Red" data-productBrand="Apple" bindtap="clickView">
  <image id="imageclick" src="https://img13.360buyimg.com/n7/jfs/t1/842/9/3723/77573/5b997bedE4f438e5b/ccd1077b985c7150.jpg" mode="widthFix" style="width:200rpx" bindtap="clickImage">点击button</image>
</view>

clickView: function (event) {
    console.log('我是view', event)
    wx.navigateTo({
      url: "/pages/home/detail/detail?id=viewclick&uid=tcb&key=tap&ENV=weapp&frompage=lifecycle"
    })
  },
clickImage:function(event){
    console.log('I am button',event);
    wx.navigateTo({
      url: "/pages/home/detail/detail?id=imageclick&uid=tcb&key=tap&ENV=weapp&frompage=lifecycle"
	})
}

点击空白处，只会触发clickView，点击图片，上面两个函数都会触发。currentTarget指的是调用函数绑定的对象，只要触发了，这个指的就是触发的函数被绑定在哪个组件上了；而target指的是事件发生的对象，比如点击图片，事件发生的对象就是clickImage

小程序和页面的生命周期

App()函数注册小程序，Page()函数注册小程序中的一个页面，他们都接受的是对象Object类型的参数，包含一些生命周期函数和事件处理函数。
里面的各种onfunc都是在某些情况下会触发的函数

用户登录与信息获取

如果要让小程序和自己的服务器账号打通，仅仅获取用户登录凭证是不够的，需要将这个code以及你的小程序appid和appSecret传回到你的开发服务器，然后在自己的服务器上调用auth.code2session接口，得到用户的openid和session_key。由于openid是当前用户的唯一标识，可以用来判断该用户是否已经在自己的服务器上注册过，如果注册过，则根据openid生成自定义登录态并返回给小程序，整个过程非常复杂。而由于云开发与微信登录鉴权无缝整合，这些内容都不会涉及，所以这里不多介绍。
这也就是说，如果不用腾讯提供的云开发功能，服务端API可以运行在自己的服务器上咯！

json数据也可以用括号表示法获取数据
完成这节的模拟操作需要登录，在pages/index/index页面可以完成模拟登陆，也可以退出，
在开发工具里的清缓存按钮下面有退出登录，但有时候会失败，点全部清除就可以了

this指的是谁

wx.getUserInfo({
  success(res){
    console.log(this)
    console.log("wx.getUserInfo得到的数据",res)
    this.globalData.userInfo = res.userInfo
  }
})

此时this指向的是success这个函数对象，如下所示
在这里插入图片描述

wx.getUserInfo({
  success: res =>{
    console.log('this是啥',this)
    console.log("wx.getUserInfo得到的数据",res)
    that.globalData.userInfo = res.userInfo
  }
})

改成这样，这个this就是app对象了
this的指向情况非常复杂，尽管哪个对象调用函数，函数里面的this就指向哪个对象，说起来非常简单，但是场景太多，大家在开发时不必强行理解，死记硬背，把this打印出来即可。

let app = getApp()
console.log('user页面打印的app', app)
console.log('user页面打印的globalData', app.globalData)
console.log('user页面打印的globalData', app.globalData.userInfo)

看不到信息，教程说是异步获取，应该就是这个页面刷新的时候，用户信息还没有拿到
在这里插入图片描述

通过button来获取用户信息

这段代码很强，实际上就是讲解了index页面的实现原理

user.js可以给全局变量赋值，验证如下
点击获取用户信息之前
在这里插入图片描述
点击获取用户信息之后
同样，当我们授权之后，我们也可以使用wx.getUserInfo来获取用户信息

wx.getUserInfo({
      success: (res) => {
        console.log(res)
        
      }
    })

然后官方不建议再用上面这个函数来申请用户权限，相反建议使用按钮让用户自己点去
小程序授权申请 wx.authorize的问题
拒绝一次或者同意一次，这个方法就不弹窗了

数据表单

添加手机联系人

这里主要了解一下对象的扩展运算符...的用法，wx.addPhoneContact(Object object)方法下面需要的参数有很多，如下所示输入...formData的话，相当于把对应的值都完成赋值，类似于python里的**kwargs赋值表达式

submitContact: function (e) {
    let formData = e.detail.value
    formData = e.detail.value
    console.log('打印formData对象', formData)
    console.log('扩展运算符打印',  ...formData )
    wx.addPhoneContact({
      ...formData,
      success() {
        wx.showToast({
          title: '联系人创建成功'
        })
      },
      fail() {
        wx.showToast({
          title: '联系人创建失败'
        })
      }
    })
  }

bindinput响应式数据渲染

是响应式渲染，就是实时完成的

我们要先回顾一下事件对象里data-*携带的数据和表单组件携带的数据：首先组件data-*属性的数据会存储在事件对象里的currentTarget下的dataset里的属性名里，也就是data-color的值会存储在 e.currentTarget.dataset.color里；而表单组件的数据则是存储在事件对象的detail里，也就是e.detail.value里。

slider

<view style="background-color:rgb({{R}},{{G}},{{B}});width:300rpx;height:300rpx"></view>
<slider data-color="R" value='{{R}}' max="255" bindchanging='colorChanging'  show-value>红色</slider>
<slider data-color="G" value='{{G}}' max="255" bindchanging='colorChanging' show-value>绿色</slider>
<slider data-color="B" value='{{B}}' max="255" bindchanging='colorChanging' show-value>蓝色</slider>

data: {
  R: 7,
  G: 193,
  B: 96,
}

colorChanging(e) {
    console.log(e)
    let color = e.currentTarget.dataset.color
    let value = e.detail.value;
    this.setData({
      [color]: value
    })
}

注意这个设置数据的方式，这个用的就是括号取值。color记录了dateset里的颜色

图片、缓存与文件

获取手机相册或拍照的图片

下面代码是绑定方法，注意success回调方法，里面使用的是that，打印this会发现这个是success函数对象

chooseImg:function(){
    let that=this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function(res) {
        const imgurl = res.tempFilePaths
        console.log(this)
        that.setData({
          imgurl
        })
      }
    })
  }

如下所示
在这里插入图片描述
但如果使用了箭头函数的话就没问题了，这个机制真TM奇怪，this指的是什么的规律我也没搞清楚，感觉跟js原生的this还不太一样

success: res=>{}

在这里插入图片描述
做图片预览功能的时候，我发现在模拟器上有的能预览有的不能。手机上就没什么障碍了
预览上传图片的时候，代码如下，查文档可知，current指的是当前图片，urls指的是图片列表，具体场景是，我们上传了5张图片，然后预览的时候我们可能要预览第三张，那么current就应该是第三章图片的路径。urls指的就是五张图片的路径

下面代码有点问题，data-src多了个空格

<button bindtap="chooseImg">选择图片</button>
<view wx:for-items="{{imgurl}}" wx:for-item="item" wx:key="*this">
  <image mode="widthFix" src="{{item}}" data-src="{{item}} " bindtap="previewImg" style="width:100px;float:left"></image>
</view>

 previewImg:function(e){
    wx.previewImage({
      current: e.currentTarget.dataset.src,
      urls: this.data.imgurl,
    })
  }

数据与缓存storage

chooseImage: function () {
    const that = this
    wx.chooseImage({
      count: 1,
      success(res) {
        that.setData({
          tempFilePath: res.tempFilePaths[0]
        })
      }
    })
  },
  saveImage: function () {
    const that = this
    wx.saveFile({
      tempFilePath: this.data.tempFilePath,
      success(res) {
        that.setData({
          savedFilePath: res.savedFilePath
        })
        wx.setStorageSync('savedFilePath', res.savedFilePath)
      },
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      savedFilePath: wx.getStorageSync('savedFilePath')
    })
  },

<view>临时文件的图片</view>
<image mode="widthFix" src="{{tempFilePath}}" style="width:100px"></image>
<view>缓存保存的图片</view>
<image mode="widthFix" src="{{savedFilePath}}" style="width:100px"></image>
<button  bindtap="chooseImage">请选择文件</button>
<button  bindtap="saveImage">保存文件到缓存</button>