ltb8r.com

「进阶知识」微信小程序实战教程

微信小程序的语法进阶知识。 尚未看基础知识可以先看「基础知识」微信小程序实战教程,然后再观看本教程。

js文件

小程序的生命周期分为应用声明周期和页面生命周期,应用声明周期函数在app.js中定义,且在小程序运行过程中一直存在内存中处于运行状态,在这里可以定义应用声明周期函数以及定义全局变量。每个页面中的.js文件中则可以定义页面声明周期函数等,语法类似vueJS。

小程序为了提高性能,是不允许开发者操作DOM元素的。

//新建项目的app.js文件,通过App方法声明 
App({ 
  onLaunch: function () { 
    //页面渲染前执行 
  }, globalData: { 
     //定义全局变量 
     userInfo: null 
  }
});
//页面的.js文件,通过Page方法声明 
Page({ 
});

指令

小程序中常用的指令有wx:for、wx:if、wx:elif、wx:else等。

//wxml
<view>
   <text wx:if="count>0">{{count}}</text>
   <text wx:elif="count<0">{{count}}</text>
   <text wx:else>{{count}}</text>
</view>
//js
data() {
    return {
          count:0
    }
} 

wx:if、wx:elif、wx:else的逻辑等同于if else。

//wxml
<view>
     <text wx:for="arr" wx:for-item="value" wx:for-index="index">
             {{index}}.{{value}}
     </text>
</view>
//js
data() {
     return {
           arr:[
                '小明',
                '小红',
                '李雷'
           ]
     }
}
输出===>
<view>
    <text>1.小明</text>
    <text>2.小红</text>
    <text>3.李雷</text>
</view>

wx:for即循环生成标签。

事件

小程序中不使用click事件,而用tab(触摸)事件代替,事件的前缀有两种分别是bind和catch,bind:tab表示冒泡事件,即事件触发后继续冒泡触发后续事件,catch:tab表示非冒泡事件,即事件触发后不再冒泡,类似执行了event.stopPropagation()方法。

//实现一个点击加一的计数器
//wxml
<view>
    <text bind:tab="addNumber">{{count}}</text>
</view>
//js
Component({
    //调用组件传来的变量
    properties:{
    },
    //内部变量
    data() {
        return {
             count:0
        }
    },
    //内部方法
    methods:{
        //点击加一
        addNumber() {
            this.setData({ 
                count:count+1 
            });
        }
    }
});

改变data中的属性值必须使用this.setData()方法,传入一个对象,对象中存放需要改变的属性键值对。

bind:tab可以简写为bindtb,个人喜欢bind:tab,看起来更清晰

组件

对于一个js文件,函数就是一个最小的、可复用的代码片段。而组件就是对于一个项目最小的、可复用的代码片段,他包括html、css、js代码,如我们常见的页面导航栏就可以做成一个组件,通过组件名字来使用,而不用将导航栏的代码复制粘贴到每个页面中。

组件的使用

小程序的组件通过Component方法声明

//.js文件
Component({
    properties:{
        //接收外接传来的变量
    },
    data() {
        return {
            //组件内部的变量
        }
    },
    methods:{
        //组件内部的方法
    }
});

声明完毕之后,在需要使用到该组件的页面中进行调用

//使用组件的页面的.json文件
{
    "usingComponents":{
        //由键值对组成,键表示组件的名字,值是组件的路径,也是不需要文件后缀
        "component-name":"/components/component/index"
    }
}
//使用组件的页面的.wxml文件
           

父子组件的传值

首先我们看一下使用组件内部变量的例子,我们定义了userName变量并把它渲染到页面当中。

//component .wxml文件
<view>
    <text>Hello {{userName}},how are you?</text>
</view>
//component .js文件
Component({
    properties:{
        //接口外接传来的变量
    },
    data() {
        return {
            userName:"李雷"
        }
    }
});

父组件向子组件传值

接着我们接受一个外部的变量并把它渲染到页面上,这样就实现了父组件向子组件传值。

//component .wxml文件
<view>
    <text>Hello {{userName}},how are you?</text>
</view>
//component .js文件
Component({
    properties:{
        userName:{
            type:String,    //调用该组件时传入的值的类型,可以是Number、String、Boolean、Object、Aray、Null(任意类型)
            value:"李雷"    //默认值,调用该组件时未传入userName时,则userName的值为预设值李雷
        }
    },
    data() {
        return {
            //组件内部变量
        }
    }
});

子组件向父组件传值

子组件向父组件传值的思路一般都是父组件监听一个自定义的事件,子组件触发这个事件同时将值传入,父组件监听这个事件的时候就可以拿到子组件传过来的值。

//component .wxml文件
<view>
     <text bind:tap="clickMe">Hello world</text>
</view>
//component .js文件
Component({
    properties:{
        //接口外接传来的变量
    },
    data() {
        return {
            //组件内部变量
        }
    },
    methods:{
        //用户点击Hello world的时候向父组件传值
        clickMe() {
            //第一个参数为自定义事件名,父组件需要监听这个事件,第二个参数为需要传的值
            this.triggerEvent('clickMe',{msg:'Hello world'});
        }
    }
});
//parent.wxml
<!--监听clickMe事件--> 
<component bind:clickMe="clickMe"></component>
//parent.js
clickMe(event) {
    console.log(event.detail.msg);//输出子组件传来的参数Hello world,子组件传来的参数都在event.deail中
}

注意事项

前面我们说到了可以在app.wxss中定义全局样式,每个page页面都可以继承全局样式。但组件不同,组件只能继承有关字体以及color的样式,其他全局样式不能影响到组件的样式。

生命周期

小程序的声明周期分为整个应用的声明周期以及单个页面的声明周期,对于初学者来说这部分内容可以先跳过,它就像一幅眼镜,你自然会知道什么时候需要。

应用生命周期回调函数

在app.js中调用的App函数中,可以设置应用声明周期的回调函数

App({
  onLaunch (options) {
    //初始化完成后执行
  },
  onShow (options) {
    //进入小程序后执行
  },
  onHide () {
    //离开小程序后执行,注意不是销毁,如切换其他App时,微信处于后台中,这时调用onHide
  },
  onError (msg) {
    //小程序出错时执行
  }
});

页面的生命周期回调函数

Page({
  onLoad: function(options) {
    //页面初始化后执行
  },
  onReady: function() {
    //初次渲染结束执行
  },
  onShow: function() {
    //进入页面执行
  },
  onHide: function() {
//页面隐藏/切入后台时触发,如 wx.navigateTo 或底部 tab 切换到其他页面,小程序切入后台等  
  },
  onUnload: function() {
    //页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。
  },
  onPullDownRefresh: function() {
    // Do something when pull down.监听下拉刷新事件,必须开启enablePullDownRefresh
  },
  onReachBottom: function() {
    // Do something when page reach bottom. 监听用户上拉触底事件
  },
  onShareAppMessage: function () {
    // return custom share data when user share.点击转发按钮
  },
  onPageScroll: function() {
    // Do something when page scroll 页面滚动事件
  },
  onResize: function() {
    // Do something when page resize旋转屏幕触发
  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

组件生命周期回调函数

Component({
  lifetimes: {
	created:function() {
		//组件实例化的时候执行,此时不能调用setData()
	}
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
});

零碎知识点

<image>

标签中,不管图片多大,默认的图片大小宽度为300px,高度为225px,所以一定要给图片设置宽高。

页面最外层元素

html页面中最外层的元素为

,小程序中的最外层元素为,且不需要自己添加啊,小程序自动添加的。

开启识别转义字符

标签中默认不能识别 <>等转移字符,设置decode属性即可识别这些转移字符。

<text>&lt;&nbsp;&gt;<text>
==>输出,不可识别转移字符
&lt;&nbsp;&gt;
<text decode="{{true}}">&lt;&nbsp;&gt;<text>
==>输出,可以识别转移字符
< >

隐藏元素

VueJS中使用v-if控制元素是否渲染,使用v-show控制元素是否显示。微信小程序中也有对应的操作,使用wx:if控制元素是否渲染,使用属性hidden控制元素是都显示。

<!--渲染且显示(display:inline)-->
<text>Hello World<text>
<!--渲染但不显示(display:none)-->
<text hidden="{{true}}">Hello World<text>
免责声明:本站所有PPT模板资源均来自用户分享和网络收集,仅供学习与参考,请勿用于商业用途,如果损害了您的权益,请联系网站客服处理
本文地址:https://www.ltb8r.com/webseo/85.html
打赏 微信扫一扫 微信扫码打赏

相关推荐

  • 微信小程序 微信小程序开发组件初步使用和配置

    微信小程序基础开发详解知识,关于一些小程序的组件初步使用和配置项的讲解。…

    04-13 10:35 104
  • 微信小程序 「用户登录」微信小程序登录验证实现

    对于部分页面添加登录验证,当用户未登录时,进入页面,该页面自动转到登录页面。 成功登录验证后,回调到登录发起页面。…

    04-12 13:56 153
  • 微信小程序 「开发阶段」微信小程序基础教程

    要开发微信小程序之前,需要做一些准备工作,例如,下载微信开发者工具、创建本地小程序项目,这样我们就进行简单的微信小程序开发。…

    04-10 10:59 91
  • 微信小程序 「网络请求」微信小程序开发中的http请求总结

    微信小程序中的网络通信只能与指定的域名进行通信,微信小程序包括四种类型的网络请求。普通的HTTPS请求(wx.request)、上传文件(wx.uploadFile)、下载文件(wx.downloadFile)、WebSocket通…

    04-09 10:15 95
  • 微信小程序 「微信小程序」CSS3 弹性布局快速入门

    弹性布局是新一代的布局方法,在传统布局中使用浮动布局会给我们带来很多弊端,例如高度依赖HTML代码结构的CSS代码等,下面,我将使用一些示例让你快速学习弹性布局。…

    04-08 10:33 216