微信小程序开发基础知识

vscode配置

vscode开发微信小程序安装的插件:

wechat-snippet
微信小程序代码辅助,代码片段自动完成
minapp
微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）
需要输入才会触发标签补全
输入空格会触发对应标签的属性补全
wxapp-helper
选择创建wx组件，自动生成配套的文件，简直不要太爽

微信小程序目录

结构对比

基本项目目录

列表渲染

普通数组

list:[1,2,3,4,5]
wx:key="*this"

复杂的数组

<view wx:for="{{array}}" wx:key="id">
 {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      id:0,
      message: 'foo',
   }, {
      id:1,
      message: 'bar'
   }]
 }
})

条件渲染

<view wx:if="{{false}}">1</view>
  <view wx:elif="{{true}}">2</view>
  <view wx:else>3</view>
<view hidden="{{condition}}"> True </view

属性会被覆盖

事件绑定

输入框内容发生改变的时候会触发handleInput函数,并且传过去event事件对象

//不能带参数，因为微信小程序会把方法名和后面的括号和参数当做方法名的一部分
<input bindinput="handleInput" />

Page({
data:{
num: 0
},
  // 绑定的事件
  handleInput: function(e) {
    console.log(e);
    console.log("值被改变了");
    //赋值
    this.setData({
        num:e.datail.value
    })
 }
})

点击事件 bindtab

//传参的话只能是通过自定义属性来获取，这个属性在事件对象里面
<button bindtab="btnClick" data-operation="{{1}}">点击</button>

样式WXSS

不支持通配符 *
尺寸单位：css里面使用 calc(),
rpx （responsive pixel）: 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 。如在
iPhone6 上，屏幕宽度为 375px ，共有750个物理像素，则 750rpx = 375px = 750物理像
素， 1rpx = 0.5px = 1物理像素。
全局样式导入到局部的样式文件里面用 @import

//使用相对路径
@import "common.wxss";

常见组件

view就类似于以前的div
text 相当于span
1. ⽂本标签
2. 只能嵌套text
3. ⻓按⽂字可以复制（只有该标签有这个功能）
4. 可以对空格回⻋进⾏编码
image 默认（ 320px * 240px ）
switer 轮播图
轮播图的外层容器 swiper
每一个轮播项 swiper-item
swiper标签存在默认的样式：
width：100%=100vw ------height:150px
所以要给swiper根据图片设置高度
swiper宽度 / swiper高度 == 图片宽度 / 图片高度
自动轮播：
swiper标签设置 autoplay
navigator 类似于超链接标签（块级元素）
默认不能跳转到tabbar绑定的页面上
rich-text 富文本标签
可以将字符串解析成对应标签，类似 vue中 v--html 功能

<rich-text nodes='<img
src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
ng" alt="">'></rich-text>

button
开发能力 open-type属性值

获取到的电话号码是加密过的，需要自己搭建后台进行解密
radio，需要配合 radio-group 使用

radio可以设置color属性
checkbox 要配合 checkbox-group 里面

自定义组件

使用方法，注意谁实用就在谁的配置文件里面使用

数组传递之父传子

父

子

数据之子传父

子

父

小程序的生命周期函数

应用生命周期

onPageNotFound 作用
如果页面不存在了，通过js的方式来跳转页面，重新调到第二个首页，但是不能跳转到tabbar页面，和导航组件相似

页面生命周期

小程序框架

原生框架 mina

请求参数

本地缓存

不同于web缓存的是，小程序以什么格式进行缓存，那去除的时候就是以什么格式取出
将数据村到本地

//讲数据放入到本地缓存中
      wx.setStorageSync('cates', { time: Date.now(), data: this.categories })

读取本地的缓存

if (Date.now() - Cates.time > 1000 * 10) {
        this.getCategoryData()
      } else {
        //用旧数据
        this.categories = Cates.data
        this.setData({
          leftMenus: this.categories.map((item) => {
            return item.cat_name
          }),
          rightContent: this.categories[0].children,
        })
      }

css四行代码不换行

            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;

处理webp格式的图片

res.replace(/\.webp/g, '.jpg')

最后编辑于：2021.08.20 14:26:21