微信小程序基础知识

目录

​编辑

1.标签

2.单位 rpx

 3.事件

3-1.事件传参 

3-2.绑定到外层标签上面

4.条件渲染

 5.遍历

6.数据双向绑定 model:value="{{msg}}" 和data里面的数据双向绑定

 7.本地存储

8.template模板 统一结构 和 wxs样式模板 统一样式

9.组件

组件传值(父传子，子传父)

10. 使用字体图标

---

 文件结构

 

 页面配置属性

全局背景颜色 在app.wxss中设置

单页面背景颜色 在单个页面的wxss中设置

page {

  background-color: #f5f5f5;

}

在设置了全局背景颜色之后设置单页面背景颜色，单页面背景颜色优先执行

1.标签

1.块级标签

使用{{}}可以直接使用data里面的数据 data里面的数据变化页面数据自动更新数据

{{data的数据}}

  {{msg}}


点击更新

page({
    数据
    data:{
     // 时间
      date: {
        year: "00",
        month: "00",
        day: "00",
        hour: "00",
        minute: "00",
        second: "00",
    },
   }
})

2.获取和修改数据

js中获取data对象中的数据通过 this.data.属性名 获取

wxml中获取data对象中的数据 对象.属性名  获取数组 数组[下标]

{{date.year}}-{{date.month}}-{{date.day}}

修改data里面的 变量 数组或者对象的值 

注意：修改的多层的 对象.属性名 或者 数组[下标] 要加双引号才可以

    until.getDate();
      修改data里面的数组或者对象里面的值需要加双引号获取
    this.setData({
      "date.year": until.getDate().year,
      "date.month": until.getDate().month,
      "date.day": until.getDate().day,
      "date.hour": until.getDate().hour,
      "date.minute": until.getDate().minute,
      "date.second": until.getDate().second,
    });


   修改data里面第一层的值直接变量名修改
   update() {
    this.setData({
      item: 60,
      dateshow: false,
    });

3.行内标签

4.图片标签： image

5.跳转标签： navigator

注意：使用声明式导航(标签)跳转 那个跳转标签默认是一行都可以点击 范围有点大不灵活

 按钮两边白色区域也可以点击跳转

 
  
        到个人中心
  

   
        到首页
  

2.单位 rpx

规定750rpx为100vw宽度  自适应不同的屏幕宽度   个人经验大概 1px=2rpx 字体宽度都适用

 3.事件

bindtap 点击事件(会冒泡)

catchtap 点击事件(不会冒泡)

bindinput 表单输入事件

bindscroll  监听滚动事件 e.detail.scrollTop  获取页面上下滚动的距离

3-1.事件传参 

1.在方法上面带参数是不行的

golist(1)" >订单审批

2.需要在元素上绑定自定义属性 “data-自定义名称”

订单审批

在方法里面通过 e.target.dataset.自定义名称，即可获取到具体参数的值

 这个是e对象

golist(e) {
    console.log(e.target.dataset.path);
  },

3-2.绑定到外层标签上面

      订单编号：{{ item.number }}
      客户姓名：{{ item.customer_name }}
      成本金额：{{ item.cost_total_price }}
      成交金额：{{ item.deal_total_price }}
      
        成交时间：{{ item.order_time }}
        详情 >
      
    

注意：如果是绑定在一个外标签上面但是是点击里面内容触发的事件就通过e.target获取不到

要使用 e.currentTarget.dataset.自定义名称 来获取

解释：currentTarget指向事件所绑定的元素，target始终指向事件发生时的元素

detail(e){
console.log(e.currentTarget.dataset.number);
},

4.条件渲染

wx:if=" "  wx:elif=" " wx:else   重排 为true就渲染

hidden=" "  重绘  为false就显示

 5.遍历

 遍历数据 默认提供item为遍历的每一项 index为下标 顺便一起绑定key

  {{ index }} : {{ item }} 

修改默认遍历参数 在多重循环时改变子元素的默认item参数

使用wx:for-index=""  wx:for-item=""

 

      {{ index2 }} : {{ item2 }} 

6.数据双向绑定 model:value="{{msg}}" 和data里面的数据双向绑定

注意：只能双向绑定data里面第一层的属性值，不能双向绑定改变data里面的数组对象里面的属性值

  数据双向绑定
  
  
  
  
  
  
  

在js里使用this.setdata方法修改msg 也可以达到数据数据双向绑定效果

 myinput: function (e) {
    //   双向数据流：可以读取和修改
    //  单向数据流：可以直接读取 修改要通过其他方式修改
    // 获取data里面的数据
    // console.log(this.data.msg);
    // 修改data里面的数据 通过setData修改值的时候,不会马上刷新UI页面
    // 渲染线程：异步
    // 逻辑线程：同步
    this.setData({
      // 改变msg的内容
      // e里面包含了修改的值和其他信息
      msg: e.detail.value,
    });
    // 优化：减少setData的使用 不是响应式数据放setData外面
  },

 改变任意一个输入框的内容其他的内容同步改变

 7.本地存储

setStorage异步存储
setStorageSync同步存储
removeStorage异步删除
removeStorageSync同步删除
getStorage异步获取
getStorageSync同步获取
getStorageInfo获取全部key名
clearStorage删除全部
clearStorageSync删除全部

 // 所有方法名和属性名都是固定的
  // 异步保存
  setStorage() {
    wx.setStorage({
      // 保存的属性名
      key: "setStorage-key",
      // 保存的属性值 原始数据类型都可以 数组 对象 字符串
      data: { a: "1", b: "2", c: "3" },
      // 是否加密保存内容
      encrypt: false,
      // 保存成功
      success() {
        console.log("设置成功");
      },
      // 保存失败 存储空间不够
      fail() {
        console.log("设置失败");
      },
      // 不管保存成功还是失败都执行
      complete() {
        console.log("设置完成");
      },
    });
  },
  // 同步保存
  setStorageSync() {
    // 可以只设置一个key和data保存
    wx.setStorageSync("setStorageSync-key", [1, 2, 3, 4, 5]);
  },
  // 删除异步的缓存
  removeStorage() {
    wx.removeStorage({
      key: "setStorage-key",
      success() {
        console.log("删除成功");
      },
      fail() {
        console.log("删除失败");
      },
      complete() {
        console.log("删除完成");
      },
    });
  },
  // 删除同步的缓存
  removeStorageSync() {
    // 只需要删除对应的key
    wx.removeStorageSync("setStorageSync-key");
  },
  // 获取存储的值
  getStorage() {
    wx.getStorage({
      key: "setStorage-key",
      // 成功回调的时候，可以接收一个回调的参数，返回这个参数，就是获取对应的key和data
      success(res) {
        console.log(res.data);
      },
    });
  },
  getStorageSync() {
    let value = wx.getStorageSync("setStorageSync-key");
    console.log(value);
  },
  // 获取存储的所有的key名
  getStorageInfo() {
    wx.getStorageInfo({
      success: (option) => {
        console.log(option);
      },
    });
  },
  // 清空数据的本地缓存

8.template模板 统一结构 和 wxs样式模板 统一样式

使用模板渲染






过滤器添加样式

 在.wxs里面创建函数改变数据样式

function priceFormat(price) {
  return "￥" + price.toFixed(2) + "元";
}
module.exports = {
  priceFormat: priceFormat,
};

9.组件

创建组件

1.在app.json里面创建一个页面，然后保存，得到一个文件夹做为组件，然后删除这个路径

 "compnent/compnent/compnent"

因为是组件不是页面

 

 2.在创建的.js文件把 Page({}) 改成 Compnent({})

3.在创建的.json文件添加 "compnent":true

3-1.如果想使用多个插槽要在Compnent({})里面加 multipleSlots: true

因为默认只能使用一个插槽

Component({
  // 定义统一的类名
  externalClasses: ["priceclass"],
  options: {
    // 默认只能一个插槽 如果需要多个插槽要设置这个
    multipleSlots: true,
    // styleIsolation:"apply-shared",
    // styleIsolation:"shared",
    // 不受其他组件影响
    styleIsolation: "isolated",
  },
  properties: {
    title: {
      type: String,
      value: "",
    },
    //Number默认值为0
    price: Number,
  },
  methods: {
    tap() {
      console.log("点击了");
    },
  },
});

4.在组件的.wxml文件里面写组件内容

	
		
		
		
		{{ price }}
		{{ title }}
	  

5.在组件的.wxss给组件添加统一样式 红色的数字

.pricecolor{
	color:red;
}

在页面使用组件

1.在想使用组件的页面的.json文件里面引入组件

{
  "usingComponents": {
    "component":"../../component/component"
  }
}

2.在页面使用组件 用标签 

  
  before
   after

样式

.comp1{
	background-color: rgba(243, 0, 0, 0.158);
}
.comp2{
	background-color: rgba(255, 68, 0, 0.527);
}
.comp3{
	background-color: rgba(255, 255, 0, 0.568);
}
.comp4{
	background-color: rgba(10, 241, 48, 0.582);
}

效果展示

组件传值(父传子，子传父)

1.父传子  效果：把父组件的值给子组件使用

在使用组件的时候给渲染的变量重新赋值

2.子传父  效果：在父组件使用子组件的方法和属性

1.在子组件里面 绑定一个事件 创建一个方法

	子组件内容

Component({
  methods: {
    sonclick(e) {
      console.log("触发自定义事件");
      // 创建自定义事件 传递值
      this.triggerEvent("diyEvent", "hello 小白");
    },
  },
  // 组件的生命周期
  lifetimes: {
    // 创建
    created() {
      console.log("创建");
    },
    // 附加(页面显示的时候)
    attached() {
      console.log("页面显示的时候");
    },
    // 移出
    detached() {
      console.log("移出的时候");
    },
  },
});

在调用的方法里面使用this.triggerEvent()创建一个自定义事件(diyEvent)和传值

this.triggerEvent("diyEvent", "hello 小白");

2.在父组件里面使用子组件的时候绑定创建的自定义方法 (diyEvent)

(自定义名字创建和使用时要相同)

3.在父组件里面调用自定义事件的方法(diy)

// 触发自定义事件的方法
  diy(e) {
    console.log("页面收到！", e);
    console.log(e.detail);
  },

在父页面触发子组件的点击事件就可以拿到子组件传递过来的参数了

10. 使用字体图标

官方网站：

  https://github.com/iconfont-cli/mini-program-iconfont-cli

 注意：复制iconfont.cn网站的symbol的js链接过来在前面要加 https 前缀使用

注意：使用的这个iconfont标签在css中默认为view标签，如果直接给view标签名设置样式会影响到字体图标​​​​​​