微信小程序笔记

最新推荐文章于 2025-03-30 14:44:35 发布

weixin_43089687

最新推荐文章于 2025-03-30 14:44:35 发布

阅读量231

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_43089687/article/details/126966518

版权

数据的增删改查

//用
{{aa}}
//更新数据
this.setData({})

渲染

数据渲染

<view>msg:{{msg}}</view>
<view>num:{{num}}</view>

列表渲染

<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:key="hang" wx:for-item="hang">
    <text wx:if="{{lie<=hang}}" 
    wx:for="{{[1,2,3,4,5,6,7,8,9]}}" 
    wx:for-item="lie" wx:key="lie">{{lie}}x{{hang}}={{hang*lie}}</text>
</view>

条件渲染

<view wx:if="{{}}"></view>
<view wx:elif="{{}}"></view>
<view wx:else></view>

路由

路由界面

app.json

//第一页为首页
    "pages": [
        "pages/pg1/pg1",
        "aaa/p04/p04",
        "pages/pg2/pg2",
        "pages/pg3/pg3",
        "pages/req/req"
    ],

路由传参

路由跳转

跳转到tabBar页面

<navigator url="/pages/p02" open-type="switchTab"> //从url开始的路径
</navigator>

跳转到其他小程序

<navigator target="miniPorgram" short-link="#wqeqwewq">跳转惠康</navigator>

编程式

wx.navigateTo 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
wx.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.redirectTo 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.reLaunch 关闭所有页面，打开到应用内的某个页面

事件触发

事件

bind,catch中的一种，

bind:普通事件绑定
catch：绑定并阻止事件冒泡

touchstart,touchmove,touchcancal,touchend,tap中的一种，相结合

touchstart:手指触摸动作开始
touchmove:手指触摸后移动
touchcancel：手指触摸动作被打断，如来电提醒，弹窗
touchend:手指触摸动作结束
tap:手指触摸后马上离开click

例如
bindtap(点击事件)

事件传参

在组件上定义data-arg,然后通过e.currentTarget.dataset.arg获取

定义

<view class="listimg" bindtap="tiaozhuan" data-item="{{item}}">
            <image src="{{item.icon}}" />
</view>

使用

tiaozhuan(e){
    let sitem=JSON.stringify(e.currentTarget.dataset.item)
}

双向绑定

<!-- 简易双向绑定(不推荐) -->
<input type="text" model:value="{{val}}" bindinput="fn3" />

<!-- 不使用简易双向绑定 -->
<input type="text" value="{{val}}" bindinput="fn3" />

封装

http.js

export default function http(url, data, method) {
    return new Promise((resolve, reject) => {
        wx.request({
            url: 'https://48f67a79-5507-4036-a8eb-c1a4336247fb.bspapp.com' + url,
            data,
            method,
            success: res => {
                resolve(res)
            },
            fail: err => {
                reject(err)
            }
        })
    })
}

调用者

async reqs() {
    http(url).then(res => {
        console.log(res);
    })
}

报错

详情-》本地设置-》勾选不校验合法域名

生命周期与钩子函数

应用生命周期（app）

onLaunch()//应用加载时执行
onShow()//页面显示（切到前台）执行
onHide()//页面隐藏（切后台）执行

页面生命周期（/pages）

onLoad() //页面加载时执行
onHide()//页面隐藏（切后台）
onShow() //页面显示（切前台）
onReady() //页面渲染时执行(一般操作页面窗口的表现)

执行顺序

app onLaunch app onShow →page onLoad→page onShow→ page onReady

监听

observers:{
//同时监听 n1 和 n2 两值,n1 或 n2 值发生变化时触发相应业务
'n1,n2':function(newN1,newN2){//业务处理}，
//监听对象里面所有属性
'obj.**':function(o){//业务处理}
}

常用方法

页面方法

下拉刷新onPullDownRefresh

onPullDownRefresh(){
    this.setData({
    num1:0
    })
    // 停止下拉刷新动作
    wx.stopPullDownRefresh()
}

上拉加载更多

onReachBottom(){

}

官方工具

官方主鍵

swiper —轮播

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

json更改

例子：navigationBarTitleText
静态：在自己的json下设置（不需要写在window里）
动态：

wx.setNavigationBarTitle({
    title: name
})

问题

路由跳转没显示

对应的js文件没有Page对象