微信小程序-语法

最新推荐文章于 2024-04-28 16:26:45 发布

巷子里有条狗

最新推荐文章于 2024-04-28 16:26:45 发布

阅读量476

点赞数

分类专栏：前端文章标签：微信小程序 javascript 前端

本文链接：https://blog.csdn.net/qq_40561863/article/details/130004406

版权

前端专栏收录该内容

50 篇文章 0 订阅

订阅专栏

第一节、动态style和class

style：

<view style="color:{{color}}" style="border:1rpx red solid;width:{{w}}rpx;height:{{h}}rpx">
    沙皮狗
</view>
    data: {
        w:400,
        h:300,
        color:"red",

class:

<view class=" {{xx}}">
    沙皮狗
</view>
    data: {        
        xx:"co",
   .co{
      color: blue;
  }

第二节、条件渲染

wx:if="{{}}"
wx:else
wx:elif="{{}}"

demo：

钱 >=10 ,则吃饭
钱 7-10 ,则吃面
钱 <7  ,则不吃



<text wx:if="{{m>=10}}">吃饭</text>
<text wx:elif="{{m>=7}}">吃面</text>
<text wx:else="">不吃</text>

第三节、block

这是一个虚拟标签，等价于vue中的template

wx:for 和 wx:if的连用

<view wx:for="{{stus}}" wx:key="id" wx:if="{{item.age>=20}}">
    {{item.name}}
</view>

第四节、事件

分类：

1 冒泡型事件类型    tap	手指触摸后马上离开
2 非冒泡型事件类型   input  focus  blur

注册事件

<标签  bind类型="函数"   ---》允许冒泡
<标签  catch类型="函数"  --->阻止冒泡

注意：函数后不能添加()，也就意味着以后传参不是通过()来传递的

函数位置：js 文件中，和data并列，直接写即可（没有methods）

demo：点击按钮，打印

wxml
<button bindtap="ff">按钮</button>

js:
	data:{},
    ff(){
        console.log("123123");
    },

event对象（传参问题）

作用：用来接受参数等

函数的第一个形参默认就是event对象
    ff(e){
        console.log(e);
    },

方式1： data-自定义属性

<button bindtap="ff" data-name="张三" data-age="16"  data-obj="{{user}}">按钮</button>
    ff(e){
        console.log(e.currentTarget.dataset);
    },

方式2：mark:自定义属性

<button bindtap="ff" mark:name="张三" mark:age="16"  mark:obj="{{user}}">按钮</button>

ff(e){
	console.log(e.mark);
},

第五节、关于操作data数据的问题

获取：

this.data.属性

赋值

错误做法：this.data.属性="",页面无法检测到数据改变，导致无法重写渲染
正确做法：
		this.setData({
			属性:值
		})
如果只想改变对象中的某些属性：
	官方：
   
        this.setData({
            ['对象.属性']:值
        })
	民间：
		 this.setData({
            user:{
                ...this.data.user,
                username:"bbb"
            }
        })

第六节、实时监听文本框输入的值

方式1：采用bindinput事件（万精油）

<input  type="text" bindinput="input" style="border:1rpx red solid"/>
    input(e){
         console.log(e.detail.value);
    },

方式2：简易双向绑定 (只能用于基本类型)

<input  type="text"   model:value="{{value}}" style="border:1rpx red solid"/>

    data: {
        value:"",
        
注意：
	1 model:value是固定语法
	2 {{value}}是自定义的data变量
	3 只支持基本数据类型

第七节、自定义组件

小程序项目组成分为了页面和组件

如果区分是不是一个页面：

1 就是看app.json中的路由是否有配置（pages），如果在pages下路径就一定是页面

2 查看js文件，如果是page()开头就是页面，如果是Component开头就是组件

新建自定义组件步骤

1 在项目根目录下新建components

2 在components新建组件目录（比如page）

3 选中page目录右键选择新建component(组件名字匹配目录名，也就是page)

4 把组件引入到页面中渲染（页面能够引入组件，组件是无法引入页面，组件可以引入组件）

找到页面.json:

{   
    //使用组件
    "usingComponents": {
        "组件名":"/components/xxxxx"

    }
}

5 最后把配置的组件名当成标签使用到对应的页面中即可

注意：子组件的函数是放在js文件中的methods中，而页面的函数是和data同级别的

补充页面级别的json配置(可以配置当前页面的窗口样式)

{   
   
    "usingComponents": {
        "mypage":"/components/page/page"

    },

    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#667788",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "white",
    "navigationStyle":"default"
}

第八节、自定义组件通信

依然保留单项数据流的特点

1 父组件更新之后，子组件会自动同步
2 子组件无法直接修改父组件传递过来的参数

1 子接受父传过来的参数（父传子）

fu：
<mypage title="{{name}}" />

zi：
   {{title}}
   
    properties: {
        title:{
            //String、Number、Array、Object
            type:String,
            value:'蜗牛',       
        }
    },
    js获取：
    this.properties.title
    this.data.title

2 父页面/组件接受子组件传递过来的参数 (自定义事件)

语法： bind:自定义事件名="函数"
<view>
    <mypage title="{{name}}"  bind:change="change"/>
</view>

函数(e){
	通过e.detail子组件传递过来的参数 
}

 语法： this.triggerEvent("匹配父亲的自定义事件名",参数)
 this.triggerEvent("change","赵六")

第九节、生命周期钩子函数

1 应用级别的钩子函数

  onLaunch() {
   	//第一次打开程序时会触发 （执行一次）
   	//以后用于自动登录
  },
  onShow(){
  	//进入小程序都会触发 (可能执行多次)
  },
  onHide(){
  	//切出小程序都会触发 (可能执行多次)
  },

重点：

  onLaunch() {
   	//第一次打开程序时会触发 （执行一次）
   	//以后用于自动登录
  },

2 页面级别的钩子函数

onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

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

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

重点：

 onLoad(options) {
 		//options可以接受上一个页面传递过来的参数
        console.log("进入页面时触发，只会触发一次");
    },
 onShow() {
        console.log("每次进入页面时都会触发，可能会触发多次");
    },
    //下拉刷新
       onPullDownRefresh() {

    },
    //触底分页
        onReachBottom() {

    },

3 组件级别的钩子函数

生命周期	参数	描述	最低版本
created	无	在组件实例刚刚被创建时执行	1.6.3
attached	无	在组件实例进入页面节点树时执行	1.6.3
ready	无	在组件在视图层布局完成后执行	1.6.3
moved	无	在组件实例被移动到节点树另一个位置时执行	1.6.3
detached	无	在组件实例被从页面节点树移除时执行	1.6.3
error	Object Error	每当组件方法抛出错误时执行	2.4.1

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
 
})

重点：

created(){}

4 组件所在页面的钩子函数

生命周期	参数	描述	最低版本
show	无	组件所在的页面被展示时执行	2.2.3
hide	无	组件所在的页面被隐藏时执行	2.2.3
resize	Object Size	组件所在的页面尺寸变化时执行	2.4.0

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})

第十节、异步请求

wx.request({
	url:"",
	data:{传参},
	header:{
		
	},
	method:"post/get",
	success(res){
		
	},
	fail(res){
	
	},
	complete(){
		//无论成功还是失败都会进入该回调函数
	}
})