微信小程序组件及获取用户权限

微信小程序组件及获取用户权限,第1张

<view>父组件msg的值:{{msg}}</view>

<Header msg="{{msg}}" bindchildChange="change" ></Header>

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

<ListItem rItem="{{item}}" bindchildGO="childGO"></ListItem>

</block>

<Header  msg="{{msg}}"></Header>

/* pages/list/list.wxss */

.item{

    padding: 5px

}

img1{

    width: 120px

    height: 120px

  尘蚂辩  border-radius: 5px

}

.row{

    flex: 1

    height: 120px

}

.title{

    padding: 10px

}

.dec{

    padding:0 10px

}

// pages/list/list.js

Page({

    /**

     * 页面的初始数据

     */

    data: {

        msg:"你是我的小宝贝",

     list:[{

         url:"https://www.baidu.com",

         imageUrl:"https://img1.baidu.com/it/u=2519912129,4264910682&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",

         title:"我的小可爱",

         content:"可爱可爱"

     },

     {

    物段     imageUrl:"https://img1.baidu.com/it/u=931545919,4030748642&fm=253&fmt=auto&app=138&f=JPEG?w=306&h=459",

         title:"我的小可爱",

         content:"mao可爱可爱"

     },]

    },

    change:function(str){

        this.setData({

            msg:str.detail

        })

    },

    childGO(e){

        wx.navigateTo({

          url: '/pages/webpage/webpage?url='+e.detail,

        })

    },

    /**

     * 生命周期函数--监听页面加载

     */

    onLoad: function (options) {

    },

    /派缺**

     * 生命周期函数--监听页面初次渲染完成

     */

    onReady: function () {

    },

    /**

     * 生命周期函数--监听页面显示

     */

    onShow: function () {

    },

    /**

     * 生命周期函数--监听页面隐藏

     */

    onHide: function () {

    },

    /**

     * 生命周期函数--监听页面卸载

     */

    onUnload: function () {

    },

    /**

     * 页面相关事件处理函数--监听用户下拉动作

     */

    onPullDownRefresh: function () {

    },

    /**

     * 页面上拉触底事件的处理函数

     */

    onReachBottom: function () {

    },

    /**

     * 用户点击右上角分享

     */

    onShareAppMessage: function () {

    }

})

 "usingComponents": {

    "ListItem":"/components/ListItem/ListItem",

    "Header":"/components/Header/Header"

  }

<view class="flex item" bindtap="go" data-url="{{rItem.url}}">

<image class="img1" src="{{rItem.imageUrl}}"></image>

<view class="row">

<view class="title">{{rItem.title}}</view>

<view class="dec">{{rItem.content}}</view>

</view>

</view>

.img1{

  width: 120px

  height: 120px

  display: block

  border-radius: 5px

}

.item{

  padding: 5px

}

.row{

  flex: 1

  height: 120px

}

.title{

  padding: 10px

}

.dec{

  padding: 0 10px

}

.flex{

  display: flex

}

.flex-between{

  justify-content: space-between

}

.flex-center{

  justify-content: center

  align-items: center

}

// components/ListItem/ListItem.js

Component({

  /**

   * 组件的属性列表

   */

  properties: {

    /* 子组件用properties来接收对象 */

    rItem:{

      /* 如果没有传入对象显示的默认值 */

      type:Object,

      value:{

        imageUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-a7c5da54b8008049fe43089752c74ce2_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648446806&t=9f16e5a2c12d51ba32169795e4d339f7',

      title:'我的小可爱',

      content:'我的小可爱我的小可爱我的小可爱我的小可爱'}

    }

  },

  /**

   * 组件的初始数据

   */

  data: {

  },

  /**

   * 组件的方法列表

   */

  methods: {

   go(e){

    console.log(e)

    let url = e.currentTarget.dataset.url

    this.triggerEvent('childGO',url)

   }

  }

})

<view class="t" bindtap="handler" >{{msg}}</view>

.t{

    font-size: 25px

    padding: 10px

    text-align: center

}

// components/Header/Header.js

Component({

    /**

     * 组件的属性列表

     */

    properties: {

    msg:{

        type:String,

        value:'我是Header'

    }

    },

    /**

     * 组件的初始数据

     */

    data: {

    },

    /**

     * 组件的方法列表

     */

    methods: {

    handler:function(){

        /* 直接改子组件里的msg父组件不会同步所以不能直接改 */

        /* this.setData({

            msg:'你好'

        }) */

        this.triggerEvent('childChange','你可真坏啊')

    },

    }

})

<button bindtap="getuserInfo" plain type="primary">获取用户信息</button>

<image src="{{touxiang}}" class="t"></image>

<view>{{nicheng}}</view>

<!-- 想要已进入页面就显示头像和昵称使用 open-type 标签 -->

<open-data type="userAvatarUrl"></open-data>

<open-data type="userNickName"></open-data>

<!-- 使用语言 -->

<open-data type="userLanguage"></open-data>

data: {

        msg: 'csgo',

        touxiang: "",

        nicheng: ""

    },

getuserInfo() {

        wx.getUserProfile({

            desc: '亲爱的宝贝', // 声明获取用户个人信息后的用途,后续会展示在d窗中,请谨慎填写

            success: (res) => {

                console.log(res)

                let {

                    userInfo: {

                        avatarUrl,

                        nickName

                    }

                } = res

                this.setData({

                    nicheng: nickName,

                    touxiang: avatarUrl

                })

            }

        })

    },

微信小程序的组件和Vue的组件非常相似。

在微信小程序中有很多内置组件,比如button view input image等,有时候我们要自定义组件。和Vue的组件似的。

如何创建自定义组件:

新建一个components目录,在里边创建自定义组件

组件的组成:

使用组件:

一个简单的示例:

创建comp,代表页面;创建components/xxxx,代表组件。

创建组件:

使用组件:

注意:json文件中不能写注释啥的。这里的注举键释租芹是为了解释清楚,在开发中不能写注释。

组件的注意事项:

组件的样式细节:

如何控制页面和组件的样式相互影响:

组件和页面相互通信

this.triggerEvent(事件名,参数对象,{}),最后是options,额外的一些选项

预留一个设备,以有利于对以后进行扩展。

好处:

例子:

在移动端,导航栏,nav-bar,分为左中右三部分。不把这三部分的内容写死。就用插槽,为了封装性更好。

单个插槽的使用很简单:

多个插槽的使用稍微弊答毕复杂,要设置几个东西:

component构造器中可以写哪些东西,如下


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12266518.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-24
下一篇 2023-05-24

发表评论

登录后才能评论

评论列表(0条)

保存