微信小程序知识初学

微信小程序入门级知识点

1.小程序的生命周期

onlaunch：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）（app.js）；
onLoad: 页面加载
小程序注册完成后，加载页面，触发onLoad方法。一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数（页面js）。
onShow: 页面显示
页面载入后触发onShow方法，显示页面。每次打开页面都会调用一次（比如当小程序有后台进入到前台运行或重新进入页面时）。
onReady: 首次显示页面，页面初次渲染完成，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
onHide: 页面隐藏
当navigateTo、底部tab切换、上传文件选择图片时调用。
onUnload: 页面卸载
当返回上一页wx.navigateBack、wx.relanch、wx.redirectTo时都会被调用(这里的坑有点深)。
基本上可以说执行顺序为onLaunch–onLoad–onShow–onReady–onHide.
虽然说onLaunch在onLoad之前执行，但是在onLaunch里请求获取是否有权限，等待返回值的时候Page里的onLoad事件就已经执行了。
解决办法：
在APP里面onLanch中的网络请求中设置判断

 if (this.userInfoReadyCallback) {
    this.userInfoReadyCallback(res)
}

在page的onLoad中设置一个回调

app.userInfoReadyCallback = res => {
	if (res != '') {
		console.log("app.globalData.userInfo")
	}
}

2.小程序的全局数据globalData

//app.js
App({
    globalData: {
        name: '张三',
        age: 18
    }
})

在app.js中修改globalData，只需要给对应的变量重新赋值就可以了：

App({
    globalData: {
        name: '张三',
        age: 18
    },
    onLoad: function(){
        this.globalData.name = '李四'
    }
})

在其他页面读取以及修改globalData。不论是读取还是修改，首先需要在应用的页面js文件中，引用app()实例，所以在js文件中，第一句要写上这句：

var app = getApp();
//index.js
var app = getApp();
Page({
    onLoad: function() {
    	getApp().globalData.name = "王二麻子";
        console.log(app.globalData.name);
    }
})

3.小程序标签分类

view（视图容器 类似于div）、text（文字 类似于span）、rich-text（富文本）、swiper（滑块视图容器）、icon（图标）、progress（进度条）、button（按钮）、form（表单）、input（输入框）、checkbox（多项选择器）、radio（单项选择器）、picker（列表选择器）、slider（滚动选择器）、switch（开关选择器）、textarea（多行输入框）、label（标签）、navigator（应用链接）、audio（音频）、image（图片）、video（视频）、camera（系统相机）、map（地图）、scroll-view（可滚动视图容器）、picker-view（内嵌列表选择器）、canvas（画布）movable-area（可移动区域）、movable-view（可移动的视图容器）、cover-view（覆盖视图）、cover-image（覆盖图片）、functional-page-navigator（跳转到插件功能页）、live-player（实时音视频播放）、live-pusher（实时音视频录制）

<!-- 文本渲染，使用{{}} -->
<text>{{msg}}</text>
<view class="box {{isRed?'red':''}}"></view>
<!-- 属性绑定,{{}} -->
<image src="{{imgUrl}}"></image>
<!-- 条件判断{{}} 
如果条件满足就展示对应的dom，不满足不移除dom -->
<view wx:if="{{formIn}}">显示为内</view>
<view wx:else>显示为外</view>
<!-- 遍历,{{}}
默认的元素别名item,默认的索引别名index -->
<view wx:for="{{movieList}}" wx:key="*this">{{item}}--{{index}}</view>

4.事件绑定

事件类别：

tap：点击事件；

longtap：长按事件；

touchstart：触摸开始；

touchend：触摸结束；

touchcansce：取消触摸；

事件绑定：

bind绑定；

catch绑定；（能阻止事件冒泡）

// index.wxml中
<view bindtap="add2" data-value="{{'hello'}}">点击我  自定义属性传参数</view>

在冒泡的事件中： currentTarget 和 target是不一致的； currentTarget是我们绑定了的组件，target是发生事件的组件；

// index.js
add2:function(e){
    console.log(e)  // e.currentTarget.dataset.value = 'hello'
  },

input事件

<input type="text" bindinput="changeInput" />