原生小程序中模板自定义组件事件

不想写，还得写，写就写，慢慢写

于 2023-02-23 01:06:20 发布

阅读量339

点赞数

文章标签：小程序 javascript 开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_74331185/article/details/129173547

版权

封装request.js请求文件

目的：优化代码结构以及后期项目版本迭代和维护方便，提升代码的执行速度。

假设:在原生page中使用基本写法创建ajax请求

 //发送请求了
      wx.request({
          url:"",
          method:"",
          data:"",
          success(res){
            //写业务操做代码

          },
          fail(err){

          }
      });

 //第一点：page界面业务操做代码混乱，代码多层嵌套。
 //第二点：多次书写重复代码造成代码冗余，造成小程序珠宝太大，导致原生小程序不能上线（最新版本主包v奥大小为1.5M）

新建思想：对内置api进行二次封装。

新建封装结构：

page界面业务代码

在utils工具类（公用业务）二次封装网络请求（wx.request）

需要了解原生小程序中如何进行代码模块化封装

查官方文档：
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";
//引入
var tools = require("./tools.wxs");

二次封装网络文件

//request 二次封装文件
//请求方式
//接口是否认证
//接口是否传参
//请求头设置不一样  content-type
//定义基本路径
let baseUrl = "http://xawn.f3322.net:10004/"
//定义header
let header = {
    "Content-Type": "application/json"
};
//封装缓存读取方法
function getStorage(key) {
    return wx.getStorageSync(key);
}
/* 
封装的请求request
*/
function Request(url, data, method) {
    if (!method) {
        method = "get";
    }
    //读取用户的令牌值  token
    let token = getStorage('_token');
    if (token) {
        header['token'] = token;
    }
    return new Promise((resolve, reject) => {
        //执行ajax请求
        wx.request({
            method: method,
            url: `${baseUrl}${url}`,
            data: data,
            header: header,
            success(res) {
                //promise成功响应数据
                resolve(res);
            },
            fail(err) {
                reject(err);
            }
        })
    })
}
module.exports =

wxml语法

wx:if  条件判断
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

wxml使用模板：
定义模板： 使用name属性即可
<!-- 创建模板 -->
<template name="img">
  <image src=""></image>
</template>
<!-- video模板 -->
<template name="vide">
  <video src=""></video>
</template>
在网页中使用：
 <template is="img">
 </template>

 模板中使用数据需要用data属性传递
 将模板所需要的 data 传入
 //使用条件编译  结合数据返的type类型
   <block wx:for="{{item.media}}" wx:for-item="items" wx:key="indexs" wx:for-index="indexs">
            <template wx:if="{{item.type==1}}" is="img" data="{{items}}">
            </template>
            <template wx:else is="vide" data="{{items}}">
            </template>
   </block>

wxml 中template封装

官方文档给出了引入template模板方法

WXML 提供两种文件引用方式import和include。

在需要使用template的Page界面中，使用import组件引入外部定义的template模板

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

在使用的page界面

使用

template模板仅限网页模板结构渲染。

将模板的css公用抽离在使用模板的page中引入

@import "common.wxss";
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

原生小程序中的自定义组件

自定义组件由json wxml wxss js 4个文件组成

修改自定义组件的json文件

直接在项目尚新建component组件可以直接生成component组件。

生成的组件内置Component构造器

// component/swiper/swiper.js
使用组件的构造器生成组件的代码区域
Component({
    /**
     * 组件的属性列表
     * 等价vue组件的props
     */
    properties: {

    },

    /**
     * 组件的初始数据
     * 组件自身的数据
     */
    data: {

    },

    /**
     * 组件的方法列表
     */
    methods: {

    }
})

自定义组件在Page界面中使用

Page界面中的json配置文件：

在app.json配置文件中可以全局注册自定义组件

在项目中msg的界面下配置局部注册

在msgwxml界面中使用自定义组件

全局注册：

任何Page界面都可以使用。

自定义组件中父组件给子组件传递值

1.在自定义组件中先约束props传值

properties:{
     banner:Array,//直接定义数据类型
     bannerList:{
       type:Array,//类型
       value:[],//定义默认值
     }
}

父组件给子组件传值，子组件中默认的this为当前组件实例，并且组件的props默认关联到data数据源。

结论是:自定义组件的rops可以在组件的wxml中直接使用变量。

原生小程序如何操做事件

事件是视图层到逻辑层的通讯方式。

事件可以将用户的行为反馈到逻辑层进行处理。

事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

原生小程序事件前缀

bind****
bindtap====click
bindlongtag

事件处理函数的e

事件点击传值

事件处理函数中在e.currentTarget上获取

// 跳转页面 类似编程导航
    // 跳转page下的界面
    // navigateTo 跳转可以写代码参数
    wx.navigateTo({
      url: `/pages/type/type?id=${id}`,
    })
    // 跳转tabbar
    //switchTab不能携带数据
    // wx.switchTab({
    //   url: '/pages/my/my',
    // })

自定义组件中如何添加自定义事件

在组件上声明自定义事件

<component-tag-name bindmyevent="onMyEvent" />
bind****(自定义名称)

在子组件中对应的业务代码位置触发

子组件触发自定义事件传值

父组件接收