1. Toy模板网首页
  2. > Toy博客

微信小程序基础知识

10月前 作者：白云~️ 分类：Toy博客 阅读(46) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序基础知识。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

​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.<view>块级标签</view>

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

<view>{{data的数据}}</view>

<!-- 行内样式的属性值不加引号 -->
<view class="title" style=" background-color:rgba({{bc}})">
  <text style="color:{{color}}">{{msg}}</text>
</view>

<text wx:if="{{dateshow}}" style="color:#00a870">点击更新</text>
<!-- 三元 -->
<view class="update" catchtap="update" style="pointer-events:{{dateshow ?'auto':'none'}}">
page({
    数据
    data:{
     // 时间
      date: {
        year: "00",
        month: "00",
        day: "00",
        hour: "00",
        minute: "00",
        second: "00",
    },
   }
})

2.获取和修改数据

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

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

<view>{{date.year}}-{{date.month}}-{{date.day}}</view>

修改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.<text>行内标签<text>

4.图片标签： image

<image src="../（该图片的相对路径)"></image>

<image src="../img/home.png" mode="widthFix" alt=""/>

微信小程序基础知识

5.跳转标签： navigator

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

微信小程序基础知识

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

 <!-- 路径前面要加 "/" 拼接绝对路径 从根目录开始 -->
  <navigator url="/pages/user/content" open-type="switchTab">
        到个人中心
  </navigator>

  <navigator url="/pages/index/index" open-type="switchTab" > 
        到首页
  </navigator>

2.单位 rpx

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

 3.事件

bindtap 点击事件(会冒泡)

catchtap 点击事件(不会冒泡)

bindinput 表单输入事件

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

3-1.事件传参 

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

<text catchtap="golist(1)" >订单审批</text>

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

<text catchtap="golist" data-path="/pages/use/compute_order/order">订单审批</text>

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

微信小程序基础知识 这个是e对象

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

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

<view class="text" catchtap="detail" data-number="1">
      <view>订单编号：{{ item.number }}</view>
      <view>客户姓名：{{ item.customer_name }}</view>
      <view>成本金额：{{ item.cost_total_price }}</view>
      <view>成交金额：{{ item.deal_total_price }}</view>
      <view>
        成交时间：{{ item.order_time }}
        <text>详情 ></text>
      </view>
    </view>

注意：如果是绑定在一个外标签上面但是是点击里面内容触发的事件就通过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

 <view wx:for="{{ list }}" wx:key="index"> {{ index }} : {{ item }} </view>

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

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

<view wx:for="{{ list }}" wx:key="index"> 

     <view wx:for="{{ item.child }}" wx:key="index2" wx:for-item="item2" wx:for-index="index2"> {{ index2 }} : {{ item2 }} </view>

</view>

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

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

<view>
  <view class="title">数据双向绑定</view>
  <!-- 绑定一个事件修改data里面的数据让这个和model:value一样的效果 -->
  <input
    type="text"
    bindinput="myinput"
    value="{{ msg }}"
  />
  <!-- 双向绑定 model:value="{{msg}}" 和data里面的数据双向绑定-->
  <!-- 数据双向绑定 model:value绑定的值改变或者data里面的这个值改变其他使用这个值的也一起改变 -->
  <!-- model:value可以直接修改data里面的数据 -->
  <input type="text" model:value="{{ msg }}" />
  <input type="text" model:value="{{ msg }}" />
</view>

在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.本地存储

<!-- 可以存储所有原始数据类型 对象 数组 字符串 -->
<view bindtap="setStorage">setStorage异步存储</view>
<view bindtap="setStorageSync">setStorageSync同步存储</view>
<view bindtap="removeStorage">removeStorage异步删除</view>
<view bindtap="removeStorageSync">removeStorageSync同步删除</view>
<view bindtap="getStorage">getStorage异步获取</view>
<view bindtap="getStorageSync">getStorageSync同步获取</view>
<view bindtap="getStorageInfo">getStorageInfo获取全部key名</view>
<view bindtap="clearStorage">clearStorage删除全部</view>
<view bindtap="clearStorageSync">clearStorageSync删除全部</view>
 // 所有方法名和属性名都是固定的
  // 异步保存
  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样式模板 统一样式

<!-- 创建模板 -->
<template name="mytemplate">
	<view class="item">
		<view>{{a}}</view>
		<view>{{b}}</view>
		<view>{{c}}</view>
		<view>{{utils.priceFormat(money)}}</view>
	</view>
</template>

<view>使用模板渲染</view>
<!-- 渲染模板 使用对应模板is="name" 注意money加了toFixed保留二位小数，必须是数字类型所以不能加引号 -->
<template is="mytemplate" data="{{a:'1',b:'2',c:'3',money:9.9}}"></template>
<template is="mytemplate" data="{{a:'1',b:'2',c:'3',money:9}}"></template>
<!-- 参数可以在行内使用data定义 也可以从js的data里面获取然后解构 -->
<template is="mytemplate" data="{{...obj}}"></template>
<template is="mytemplate" data="{{...obj}}"></template>
<view>过滤器添加样式</view>
<!-- 导入过虑样式 -->
<wxs src="../../WXS/utils.wxs" module="utils"></wxs>
<template is="mytemplate" data="{{...obj}}"></template>
<template is="mytemplate" data="{{...obj}}"></template>

 在.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文件里面写组件内容

<view>
	<view class="item" bindtap="tap">
		<!-- 定义具名插槽 -->
		<slot name="before"></slot>
		<slot name="after"></slot>
		<view class="pricecolor">{{ price }}</view>
		<view>{{ title }}</view>
	  </view>
</view>

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

.pricecolor{
	color:red;
}

在页面使用组件

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

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

2.在页面使用组件 用<compnent />标签 

<view class="container">
<component class="comp1"/>
<component class="comp2">
  <!-- 使用插槽 用的具名插槽 slot="定义的插槽名字" -->
  <view slot="before">before</view>
  <view slot="after"> after</view>
</component>
<!-- 组件传值 父传子 在组件里面渲染变量price和title  -->
<!-- 组件里properties定义了该属性 在使用组件的时候重新赋值该属性让渲染出来的值就是重新定义的值 -->
<component price="9.9" class="comp3"/>
<component title="hello" class="comp4"/>
</view>

样式

.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.父传子  效果：把父组件的值给子组件使用

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

<component price="9.9" class="comp3"/>

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

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

<view class="son" bind:tap="sonclick" data-class="son">
	子组件内容
</view>
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)

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

<Compnent bind:diyEvent="diy"/>

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标签名设置样式会影响到字体图标​​​​​​文章来源地址https://www.toymoban.com/news/detail-402086.html

到了这里，关于微信小程序基础知识的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包