微信小程序入门知识点汇总

整理自慕课网实战课《微信小程序入门 2020全新版》

下方只是简单的归纳常用的点，更多知识可以查看小程序开发文档。

1.JSON对象和JS对象的区别

JSON只是一种数据格式（或者叫数据形式）。
我们所说的json对象其实就是严格符合json格式的js对象。

<script>
var obj2={};//这只是JS对象
var obj3={width:100,height:200};/*这跟JSON就更不沾边了,只是JS的 对象 */
var obj4={'width':100,'height':200};/*这跟JSON就更不沾边了,只是JS的对象 */
var obj5={"width":100,"height":200,"name":"rose"}; /*我们可以把这个称做：JSON格式的JavaScript对象 */
var str1='{"width":100,"height":200,"name":"rose"}';/*我们可以把这个称做：JSON格式的字符串 */
var a=[
 {"width":100,"height":200,"name":"rose"},
 {"width":100,"height":200,"name":"rose"},
 {"width":100,"height":200,"name":"rose"},
 ];
 /*这个叫JSON格式的数组，是JSON的稍复杂一点的形式 */
var str2='['+
 '{"width":100,"height":200,"name":"rose"},'+
 '{"width":100,"height":200,"name":"rose"},'+
 '{"width":100,"height":200,"name":"rose"},'+
 ']' ;
 /* 这个叫稍复杂一点的JSON格式的字符串 */
</script>

参考文章：JSON与JS对象的区别与对比

2.px和rpx的区别

rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。
无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px。

3.flex布局

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
有主轴和交叉轴，主轴由flex-direction决定。

.tool{
  display: flex;
  flex-direction: column;        //竖直的为主轴
  align-items: center;        //align-items属性定义项目在交叉轴上如何对齐。
  justify-content: center;    //justify-content属性定义了项目在主轴上的对齐方式。
}

4.属性中字符串和JS表达式的区别

<checkbox checked="{{false}}"> </checkbox>

特别注意：不要直接写 checked=“false”，其计算结果是一个字符串，转成 boolean 类型后代表真值。

{{ }}中只能写js表达式，不能写函数等。

5.数据绑定Paga.data和SetData函数

Page({
    data: {
    a:"zhu"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
        a:"cheng",
        b:"song"
        })
    console.log(this.data)
  },
})

data中一般写初始化数据（先显示定义），setData一般对数据进行创建+更新。

wxml界面：

<view> {{a}} </view>

6.DOM优先和数据优先

<script>
var a = "Hello World!";
document.getElementById("demo").innerHTML = a;
</script>

上方是传统的DOM优先，需要获取DOM结点。

现在小程序框架可能会用到DOM，一般开发就用数据优先的思想。小程序的数据优先的思想是用数据绑定来实现的。
在wxml的DOM节点中直接用表达式{{a}}，更加的方便。

7.生命周期函数和特殊回调函数

初次打开一个页面执行顺序：

• onLoad（监听页面加载）
• onShow（监听页面显示）
• onReady（监听页面初次渲染完成）

切到后台

• onHide（监听页面隐藏）

再切到前台

• onShow（不会再执行onLoad和onReady）

特殊回调函数：

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

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

},

8.条件渲染和列表渲染

条件渲染:

<view wx:if="{{condition}}"> 123 </view>
<view wx:else> 456 </view>

Page({
  data: {
    condition: true
  }
})

列表渲染:

var postList = [{...},{...},{...},]       //js对象数组

//一次循环获得的对象名为item，类似于（for item in postList）
<block wx:for="{{postList}}" wx:key="index"  wx:for-item="item" wx:for-index="idx">
	<post bind:posttap = "onGoToDetail" res="{{item}}"/>
</block>

for-index就是每项的索引，从0开始。
for-item是每一项的引用。
wx:key="index"能加快性能。index字段是表中的唯一键。

9.路由函数NavigateTo和RedirectTo的区别

wx.navigateTo({
  url:'/pages/post-detail/post-detail?pid=' + pid
})

navigateTo会保存当前页面，会形成页面栈，现在页面栈最大为10。屏幕左上角会有返回键。

wx.redirectTo({
  url:'/pages/post-detail/post-detail?pid=' + pid
})

redirectTo会销毁当前页面，屏幕左上角会有主页键。

10.Catch与Bind事件的区别

<view bind:tap="onViewTap" class="journey-container">
  <text catch:tap="onTextTap" class="journey">开启小程序之旅</text>
</view>

点击“开启小程序之旅”这个文本，只会触发onTextTap事件。

catch会阻止事件继续冒泡。

<view catch:tap="onViewTap" class="journey-container">
  <text bind:tap="onTextTap" class="journey">开启小程序之旅</text>
</view>

点击“开启小程序之旅”这个文本，会触发onTextTap事件和onViewTap事件。

11.自定义属性命名规则

自定义属性以“data-”开头，点击获取的event事件中，自定义属性会在dataset中，并去掉“data-”。

关于大小写：自定义属性data-post-id 会变成 postId。自定义属性data-postId会变成 postid。想要有驼峰，需要以“-”分割。

12.app.js的意义和作用

app.js作为项目的入口文件，用于创建应用程序对象。
启动小程序，会执行onLaunch()。
app.js还可以保存全局变量。

App(
  {
    onLaunch(){
      console.log("小程序启动")
    },
    gIsPlayingMusic:false,
    gIsPlayingPostId:-1,
    gBaseUrl:"http://t.talelin.com/v2/movie/"
  }
)

13.缓存与异步

onLoad: function(){
  wx.setStorageSync('flag', 1)
  const flag = wx.getStorage({
    key: 'flag'
  })
  console.log(flag)   //输出Promise
}

采用回调的方式：

onLoad: function(){
  wx.setStorageSync('flag', 1)
  const flag = wx.getStorage({
    key: 'flag'
    success(value){
      console.log(value.data)        //输出1
    }
  })
  console.log(flag)   //输出undefined，回调的话，不会返回flag。
}

采用Promise方式：

onLoad: function(){
  wx.setStorageSync('flag', 1)
  const flag3 = wx.getStorage({
    key: 'flag'
  })
  flag3.then(value => console.log(value.data))    //输出1
  console.log(flag3)   //输出Promise
}

采用async/await方式：

onLoad: async function (options){
 wx.setStorageSync('flag', 1)
 const flag4 = await wx.getStorage({
   key: 'flag'
 })
 console.log(flag4)   //输出{errMsg: "getStorage:ok", data: 1}
}

14.Page中的this和that

Page({
	getWeRunData: function() {
	  var that = this
	  wx.getWeRunData({
	    success(weRunEncryptedData) {
	      console.log(weRunEncryptedData)
	      that.getStepInfoList(weRunEncryptedData)
	    }
	  })
	},
})

Page(…）中传入的是一个js对象1，相当于一个匿名对象1，this就是指的这个。
但是wx.getWeRunData(…)中也要传一个js对象2，他的this指向这个匿名对象2，为了让wx.getWeRunData(…)中调用Page(…）的其他属性，必须把Page(…）的this赋值给that。

15.小程序的函数定义

Page({
   onLoad: function (){
    this.dd(),
    this.dd2(),
    this.dd3()
  },

  dd: function (){    //最常见的写法，相当于一个匿名函数，dd只是它的key。
    console.log(2)
  },

  dd2: () => {
  console.log(3)
  },
  
  dd3(){				//简化写法
    console.log(4)
  },

  dd4: function aa(){    //给函数个名字也行，不过没啥用。
    console.log(5)
  },
  
	//function aa() {    //直接写function是错的。
	  //return 2
	//},
})