精华内容
下载资源
问答
  • 第15课 微信小程序behavior组件间的数据共享: 先看看目录结构: 我们先编写一下两my-behavior的代码: 这里是my-behavior.js的代码://behavior内还可以嵌套引入behavior // my-behavior.js //引入behaviors2就...

    15课 微信小程序behavior组件间的数据共享:

    先看看目录结构:

    在这里插入图片描述

    我们先编写一下两my-behavior的代码:

    这里是my-behavior.js的代码://behavior内还可以嵌套引入behavior

    // my-behavior.js
    //引入behaviors2就相当于把behaviors2里面的方法与数据都加到这里面
    var myBehavior2 = require('my-behavior2')
    module.exports = Behavior({
      behaviors: [myBehavior2],
      properties: {
        myBehaviorProperty: {
          type: String
        }
      },
      data: {
        myBehaviorData: '这是myBehavior内的数据'
      },
      attached: function () { },
      methods: {
        myBehaviorMethod: function () {
          console.log('这是执行myBehavior内的方法')
        }
      }
    })
    

    这里是my-behavior2.js的代码:

    // my-behavior2.js
    module.exports = Behavior({
      behaviors: [],
      properties: {
        myBehaviorProperty2: {
          type: String
        }
      },
      data: {
        myBehaviorData2: '这是myBehavior2内的数据'
      },
      attached: function () { },
      methods: {
        myBehaviorMethod2: function () {
          console.log('这是执行myBehavior内引入的myBehavior2中的方法')
        }
      }
    })
    

    下面是组件内代码:

    组件component-tag-name.js内代码:

    // components/component-tag-name.js
    //引入behaviors 实现组件间代码共享
    var myBehavior = require('my-behavior')
    Component({
      behaviors: [myBehavior],  //挂载上Behavior即可使用其里面的方法与数据
      data: {
      	me: '这是组件自己递数据'
      },
      methods: {
        
      }
    })
    
    

    组件component-tag-name.wxml内代码:

    <!-- 组件模板 -->
    <view>{{me}}</view>
    <view>{{myBehaviorData}}</view>
    <view>{{myBehaviorData2}}</view>
    <button bindtap="myBehaviorMethod">点击执行myBehavior内方法</button>
    <button bindtap="myBehaviorMethod2">点击执行myBehavior2内方法</button>
    

    组件component-tag-name.json内代码:

    {
      "component": true,
      "usingComponents": {}
    }
    

    index.wxml内直接写上组件:

    先在index.json内引入组件:

    {
      "usingComponents": {
        "my-component": "/components/component-tag-name"
      }
    }
    

    index.wxml写上即可

    <!-- 引用组件的页面模版 -->
    <my-component></my-component>
    
    

    运行效果如下:

    在这里插入图片描述

    展开全文
  • behavior属性是小程序中的混合模式开发,可以提炼代码,还可以根据自己的需求做各种不可描述的工作,具体可以看官方文档 我这里新建了一个requestBeh.js文件,文件内容如下,包含两个方法,_init_data一般用于onLoad...
    1. behavior属性是小程序中的混合模式开发,可以提炼代码,还可以根据自己的需求做各种不可描述的工作,具体可以看官方文档
      我这里新建了一个requestBeh.js文件,文件内容如下,包含两个方法,_init_data一般用于onLoad、tab切换、操作数据列表后需要更新数据,对数据进行第一次初始化,_load_data()一般用于onReachBotton方法,做触底分页加载
    import {request} from "../service/request";
    
    module.exports = Behavior({
      data: {
        dataList: [],
        dataListParams: {
          page: 1,
          init: false,
          loadMore: true
        }
      },
      methods: {
        /**
         * 初始化分页列表数据
         * @param apiName 请求名称
         * @param params 请求参数
         * @param loading 是否显示loading
         * @param callBack 是否使用callBack对请求数据进行预处理
         * @param listName 数据名称
         * @param prefix 请求前缀
         * @private
         */
        _init_data(apiName, params = {}, opts = {}) {
          opts = {
            loading: true,
            callBack: null,
            lastCallBack: null,
            listName: 'dataList',
            prefix: '/tripapi/',
            reset: true,
            msg: '',
            ...opts
          }
          let pageParamsName = opts.listName + 'Params'
          let pageParams = {
            page: 1,
            loadMore: true,
            init: false
          }
          this.setData({
            [pageParamsName]: pageParams
          })
          this._load_data(apiName, params, opts)
        },
        /**
         * 加载分页列表数据
         * @param apiName 请求名称
         * @param params 请求参数
         * @param loading 是否显示loading
         * @param callBack 是否使用callBack对请求数据进行预处理
         * @param listName 数据名称
         * @param reset 是否初始化数据
         * @param prefix 请求前缀
         * @private
         */
        _load_data(apiName, params = {}, opts = {}) {
          opts = {
            loading: true,
            callBack: null,
            lastCallBack: null,
            listName: 'dataList',
            prefix: '/tripapi/',
            reset: false,
            msg: '',
            ...opts
          }
          let pageParamsName = opts.listName + 'Params'
          let list = this.data[opts.listName]
          let pageParams = this.data[pageParamsName]
          if (pageParams.loadMore) {
            if (opts.loading) wx.showLoading({mask: true, title: '正在加载'})
            params = {
              page: pageParams.page,
              ...params
            }
            request(apiName, params, '', true, opts.prefix).then(res => {
              pageParams.page++
              if (opts.callBack && typeof opts.callBack === 'function') {
                res.data = opts.callBack(res.data, this)
              }
              if (opts.reset) {
                list = res.data
              } else {
                list = list.concat(res.data)
              }
              pageParams.init = true
              this.setData({
                [pageParamsName]: pageParams,
                [opts.listName]: list
              })
              if (opts.lastCallBack && typeof opts.lastCallBack === 'function') {
                opts.lastCallBack(this)
              }
              if (opts.loading) wx.hideLoading()
              if (opts.msg) wx.showToast({
                title: opts.msg,
                icon: 'none'
              })
            }).catch(() => {
              pageParams.loadMore = false
              if (opts.reset) list = []
              pageParams.init = true
              this.setData({
                [pageParamsName]: pageParams,
                [opts.listName]: list
              })
              if (opts.loading) wx.hideLoading()
              if (opts.lastCallBack && typeof opts.lastCallBack === 'function') {
                opts.lastCallBack(this)
              }
            })
          }
        },
    
        /**
         * 加载详情数据
         * @param apiName
         * @param params
         * @param opts
         * @returns {Promise<unknown>}
         * @private
         */
        _load_data_form(apiName, params = {}, opts = {}) {
          return new Promise((resolve, reject) => {
            opts = {
              loading: true,
              callBack: null,
              objName: 'dataForm',
              prefix: '/tripapi/',
              msg: '',
              isObj: false, //返回的值是否是对象类型
              ...opts
            }
            if (opts.loading) wx.showLoading({mask: true, title: '正在加载'})
            request(apiName, params, '', true, opts.prefix).then(res => {
              let dataForm = null
              if (opts.isObj) {
                dataForm = res.data
              } else {
                dataForm = res.data[0]
              }
              if (opts.callBack && typeof opts.callBack === 'function') {
                dataForm = opts.callBack(dataForm)
              }
              this.setData({
                [opts.objName]: dataForm
              })
              if (opts.loading) wx.hideLoading()
              resolve(dataForm)
            }).catch((err) => {
              if (opts.loading) wx.hideLoading()
              reject(err)
            })
          })
        }
      }
    })
    
    
    
    1. 使用案例如下:需要注意的是,正常的Page({})里面是不能直接使用的,所以要在页面的js里将Page改为Component,然后将页面方法全部放到methods: {}属性里
    // package/user/guest/index.js
    import requestBeh from '../../../behavior/requestBeh'
    
    Component({ //这里需要注意,将Page改为Component
      behaviors: [requestBeh],
      /**
       * 页面的初始数据
       */
      data: {
        tabList: [
          {name: '会员', type: 1},
          {name: '分销商', type: 2}
        ],
        tabActIndex: 0
      },
    
      methods: { //这里需要注意,将页面方法全部放到methods里面
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
          this._init_data('apiName', {type: 1})
        },
        onReachBottom: function() {
          let {tabList, tabActIndex}= this.data
          this._load_data('apiName', {type: tabList[tabActIndex].type})
        },
        //tab切换
        tabChange(e) {
          let {index, item} = e.currentTarget.dataset
          this.setData({
            tabActIndex: index
          })
          this._init_data('apiName', {type: item.type})
        }
      }
    })
    
    
    展开全文
  • 小程序——behavior

    2019-09-14 09:45:15
    behavior 就相当于mixin 小程序中的组件component,如果有可以多次利用的组件可以用到behavior,就像sass中的mixin,后者函数,提供一个公共方法 ...

    behavior 就相当于mixin

    小程序中的组件component,如果有可以多次利用的组件可以用到behavior,就像sass中的mixin,后者函数,提供一个公共方法

    转载于:https://my.oschina.net/u/3373019/blog/1618750

    展开全文
  • 小程序中的behavior

    2021-02-21 10:51:18
    概念:用与小程序中组件间代码共享的特性,类似于一些编程语言的 "mixins", "traits" 作用: 每一个behavior 可以包含一些属性,数据,生命周期函数,方法 在组件中引用它时,它的属性,数据和方法会被合并到组件...

    Behavior

    概念:用与小程序中组件间代码共享的特性,类似于一些编程语言的 "mixins", "traits"

    作用:

    1. 每一个behavior 可以包含一些属性,数据,生命周期函数,方法
    2. 在组件中引用它时,它的属性,数据和方法会被合并到组件中,生命周期函数也会在对应的时机被调用
    3. 每个组件可以引用多个behavior,behavior也可以引用其它的behavior

    定义一个behavior:  (就是一个js文件,按照需求,要求,合理编辑)

       首先看下behavior  的常规结构

    // my-behavior.js
    
    // 在behavior 中使用 behavior  导入
    
    var mySecondBehavior = require('my-second-behavior')
    
    var mySecondBehavior = require('my-second-behavior')
    
    //导出
    
    module.exports = Behavior({
        
        //注册导入的behavior
        behaviors: [myThirdBehavior, mySecondBehavior],
    
        properties:{
            
         myBehaviorProperty: {
    
          type: String
    
          }
    
        },
    
        data:{},
    
        //生命周期
    
        created: function () {},
       
        attached: function () {},
       
        ready: function () {},
            
    
        //方法
        methods: {    }
      
        
    })

    在组件中使用behavior  

    // my-component.js
    
    //导入要使用的behavior  (文件名 大写的使用-替换)
    
    var myBehavior = require('my-behavior')
    var mySecondBehavior = require('my-second-behavior')
    
    Component({
      // 在注册behavior  注册的behavior中的方法名如果相同,那么后面的会覆盖
      behaviors: [myBehavior, mySecondBehavior],
       
      properties: {
        myProperty: {
          type: String
        }
      },
       // 同理 data 也会覆盖  合并
       data:{}
    
    })

    以上就是behavior 的基本使用 然后在page中正常引用组件就可以

       页面中向behavior 传旨方法同页面向组件传值

    <!-- 引用组件的页面模版 -->
    <view>
      <my-component my-behavior-property="behavior-property【my-behavitor.js】" my-property="my-property">
      </my-component>
    </view>

    更多可以结合开发者文档中的实例了解  微信开发者工具behavior

    behavior 的生命周期

    当组件触发生命周期时,生命周期函数执行顺序为:

    1. [my-behavior] created
    2. [my-component] created
    3. [my-behavior] attached
    4. [my-component] attached
    5. [my-behavior] ready
    6. [my-component] ready

    生命周期函数不会相互覆盖,而是在对应触发时机被逐个调用:

    • 对于不同的生命周期函数之间,遵循组件生命周期函数的执行顺序;
    • 对于同种生命周期函数,遵循如下规则:
      • behavior 优先于组件执行;
      • 子 behavior 优先于 父 behavior 执行;
      • 靠前的 behavior 优先于 靠后的 behavior 执行;
    • 如果同一个 behavior 被一个组件多次引用,它定义的生命周期函数只会被执行一次。
    展开全文
  • 小程序笔记--Behavior

    2021-01-10 21:53:55
    这一节主要是Behaviour的介绍,behaviors 是用于组件间代码共享的特性,每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应...
  • 在做小程序项目时,一个页面可能会拆分成很多组件去完成,一是方便代码复用,二是利于后期维护更新,使代码结构变得更为简洁。 提取公共行为,实现行为的继承 使用场景:在做项目时,往往会遇到多个组件中,有一...
  • behavior代码共享(数据不会相互影响) be.js文件 let beh = Behavior({ // 共享属性 properties: { name: { type: String, value: ‘malinshu’ }, sex: { type: String, value: ‘man’ } }, // 共享数据 data: { ...
  • 小程序中使用behavior 1.首先先定义behavior 每个 behavior 可以包含一组属性、数据、生命周期函数和方法,组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。每个组件可以...
  • 1.目录结构 demo-one 和 demo-two 一起公用一些属性 和 方法 存在demo-beh.js中 需要像模块一样导出 2.调用的方法: // components/demo-class/demo-one/index.js import { demoBeh } from '../... ...
  • 通常在这种情况,每次编写组件的js时候,都要复制同样的变量到对应的js中,但是这种写法不利于代码的维护和复用性,所以我们采取行为构建器Behavior的方法,把相同的部分也提取出来,这样有便于维护和代码的复用性!...
  • 行为追踪飞行员 此小程序中使用的图像托管在这里: :
  • Behavior行为与加入缓存系统优化流行页面 navi组件与移动端触碰区域探讨 触碰区域优化 设计师切图切大点,多余部分变成透明色 前端将可触碰区域变大 解决向左箭头变灰,向右变灰 禁用事件的技巧 产生一个向左的...
  • 当看微信小程序文档的时候有种朦胧感(之前开发小程序没有使用过) 对于Behavior我的理解就是在其Component组件中引入复用性比较高的data(数据),properties(也是数据如果有相同会覆盖data里面的数据(还可以定义...
  • 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象,属性有: pages 页面路径列表 window 全局的默认窗口表现 style 指定使用升级后的weui样式 等等 请看官方详细文档 小程序...
  • 运用这个构建器的环境是:编写了三个组件,组件的js中的外部数据,也就是properties下的变量都是重复的, 在这种情况,是不是每次编写组件的js时候,都要复制同样的变量到对应的js中,所以我们采取行为构建器的方法...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 132
精华内容 52
关键字:

小程序behavior