小程序自定义组件

最新推荐文章于 2024-07-19 22:49:05 发布

左手js右手vue

最新推荐文章于 2024-07-19 22:49:05 发布

阅读量175

点赞数

文章标签：小程序 javascript 前端

本文链接：https://blog.youkuaiyun.com/ck2018182068/article/details/127896538

版权

组件样式

样式隔离

  options: {
    // 样式隔离 apply-shared 父影响子，shared父子相互影响  isolated 相互隔离
    styleIsolation: "isolated",
    multipleSlots: true
//允许使用组件
  },

外部类

 // 通过组建的外部类实现父组件控制子自己的样式
  externalClasses: ["cell-class"],

<view class="cell cell-class">我是cell组件</cell>

页面中

<cell cell-class="mycell"></cell>
<cell></cell>
.mycell{

  line-height:120rpx !important;
  coloe:#f70
}

组件插槽

默认插槽
父组件

<cell>
<text>插槽内容</text>  
</cell>

子组件

<view><slot></slot></view>

命名多插槽

父组件

<cell>
  <text slot="pre">1</text>
  <text slot="next">1</text>
</cell>

子组件

options:{  multipleSlots: true}
<view>
  <solt name="pre"></slot>
  <solt name="next"></slot>
  </view>

组件传参

父传子 property
子传参父 triggerEvent

组件的使用

定义组件（js，wxml，json，wxss）
页面的 xxx.json usingComponent 注册

"usingComponents": {
"cell":"/components/cell/cell",
"item":"/components/item/item"
}

使用组件

自定义组件Component

生命周期  lifetimes   attach 组件的挂载
data 数据  methods 方法   properties 属性（只读）  externalClasses 外部类
options选项  multipleSlots:true 多个插槽 styleIsolation:"isolated" 组件的样式格式

定义组件 item

props
title标题 icon 图标 tip 提示 url 跳转连接 open-type 打开的方式
slot
right left插槽
event
click事件
外部类
itemClass 整体 itemClass 整体

自定义组件生命周期

组件的生命周期lifetimes
created 创建此时还不能调用 setData
attached 挂载 detached 卸载
页面的生命周期 pageLifetimes
show显示 hide后台运行 resize尺寸变化

写自定义导航栏

wx.getMenuButtonBoundingClientRect() 胶囊的边界
wx.getSystemInfoSync();系统信息（状态栏的高度）

在这里插入图片描述
配置自定义状态栏

登录功能

01 wx.login 获取 code（不固定）
02 选做（getUserProfile）用户头像信息
03 发送给后端
可以不去了解
3.1 通过code 与 appid 和Appsecret 向微信的服务器换取用户唯一的openid
3.2 通过openid 鉴定用户（给与权限）返回前端信息
04 后端返回登录的状态，权限信息

登录总结

01 wx.login 获取code
02 wx.request 发送后端
03 前端存储后端返回登录状态
04 每次请求时候携带登录状态（封装在request.js）
tips：单纯 getUserProfile不经过数据库与后端（没办法识别当前用户的）

支付功能

(不具体实现）
00 小程序支付，微信支付平台申请商家支付账号
商户号与APPID进行绑定
01 用户下单订单信息 wx.login 获取code 发给后端
1.1 走一遍登录流程（确定是哪个用户购买）
1.2 创建订单
1.3 后端发送订单订单信息-给微信的服务器（换取一个预支付id）
1.4 后端通过签名生成支付信息返回给前端
02 前端通过 wx.requestPayment (后端返回的支付信息) 发起支付
04 返回支付的结果