微信小程序_微信小程序[system] wechatlib: 2.30.3 (2023.3.30 12:59:0-CSDN博客

--在index.js的Page中的data定义响应式数据

--页面中列表项索引号默认index,列表项item

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

--更改更改列表项名和列表项索引号

wx:for-item="列表项名"

wx:for-index="列表项索引号名"

三、事件处理

1、绑定点击事件

bindtap="事件处理函数"

<button bindtap="onConfirm">按钮</button>

--事件传参

<button bindtap="onConfirm" data-num="1">按钮</button>

--事件处理:

onConfirm(e){}

--获取传参的值

e.currentTarget.dataset.num

--事件绑定的方式

bind:事件类型名="事件执行函数" 默认冒泡事件(从内往外传)

capture-bind:事件类型名="事件执行函数" 捕获事件(从外往内传)

2、绑定输入框事件

bindinput="事件处理函数"

--获取输入框的值使用e.detail.value

3、事件捕获与冒泡

事件阻止

catch:事件类型名="事件执行函数" 默认冒泡事件

capture-catch::事件类型名="事件执行函数" 捕获事件

小结:将bing改成catch即可阻止事件

四、动态更新数据

this.setData({响应式值名:'更改值'})

单位(rpx)：可以根据屏幕宽度进行自适应 1px = 2rpx

五、数组方法：

splice(index,num)：操作原数组，指定索引号开始删除几个元素

slice(start,end)：截取指定索引号之间的元素，返回新数组

六、输入框实现双向绑定：

model:value="{{响应式数据}}"

七、小程序生命周期

概念：小程序应用和页面从创建、执行到销毁经历的一系列过程

1、应用生命周期(app.js中注册)：

用户首次打开小程序，触发onLaunch(全局只触发一次)，
小程序初始化完成后，触发onShow方法，监听小程序显示
小程序从前台进入后台，触发onHide方法
小程序从后台进入前台显示，触发onShow方法

2、页面生命周期(每个页面的js文件，Page中注册)：

小程序注册完成后，加载页面，触发onLoad方法。
页面载入后触发onShow方法，显示页面。
首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。
当小程序后台运行或跳转到其他页面时，触发onHide方法。
当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。
当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload

八、路由-页面跳转：

1、组件方式：

<navigator url="地址"></navigator>

2、编程方式：

--定义bindtap方法

--方法中写

wx.navigator({

url:'地址'

})

3、打开新页面

编程:wx.navigateTo

组件:<navigator open-type="navigator" url="路由地址"></navigator>

钩子函数：路由前的页面 onHide，路由后的页面 onLoad onShow

4、路由重定向

编程:wx.redirectTo

组件:<navigator open-type="redirectTo"></navigator>

钩子函数：路由前的页面 onUnload，路由后的页面 onLoad onShow

5、页面返回

编程:wx.navigatorBack

组件:<navigator open-type="navigatorBack"></navigator>

钩子函数：路由前的页面 onUnload，路由后的页面 onShow

6、重启动

编程:wx.reLaunch

组件:<navigator open-type="reLaunch"></navigator>

钩子函数：路由前的页面 onUnload，路由后的页面 onLoad onShow

九、自定义组件

1、组件通讯

父传子:定义属性property实现

子传父:获取tag组件中data定义

十、组件库(vant-weapp)

1、npm init -y 初始化版本生成package.json文件

2、下载安装:npm i @vant/weapp -s -production

3、将 app.json 中的 "style": "v2" 去除

4、project.config.json

  "setting": {

      ...

      "packNpmManually": true,

      "packNpmRelationList": [

        {

          "packageJsonPath": "./package.json",

          "miniprogramNpmDistDir": "./miniprogram/"

        }

      ]

    }

5、构建npm包

打开微信开发者工具，点击工具 -> 构建 npm