小程序开发基础知识

小程序生命周期

• onLaunch
• onShow
• onHidden
• onError
• onPageNotFound

注意：

• onLaunch的时候不能通过getCurrentPage()获取当前页面栈、不能正常使用 setData() 修改数据

页面生命周期

• onLoad
• onshow
• onReady
• onHidden
• onUnload

自定义组件生命周期

• created
• attached
• ready
• move
• detached

注意：

• created中调用 setData() 修改数据无法得到预期效果，data中的数据会改变，但数据不会更新到视图

常见指令使用

1、数据绑定

<view> {
   {
   message}} </view>

2、列表渲染

<view wx:for="{
   {array}}" > {
   {
   index}} {
   {
   item}} </view>
//可以通过wx:for-index="indexName" wx:for-item="itemName"对index和item进行自定义命名

3、条件渲染

<view wx:if="{
   {view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{
   {view == 'APP'}}"> APP </view>
<view wx:else="{
   {view == 'MINA'}}"> MINA </view>
//隐藏
<view hidden="{
   {view == 'hidden'}}"> hidden</view>

4、表单响应式数据绑定

<input model:value="{
    {value}}" />

WXSS

1、独有的尺寸单位 rpx

屏幕宽度 = 750rpx = 100%
1rpx = (屏幕宽度 / 750) px
( n ) px = n * ( 750 / 屏幕宽度) rpx

2、选择器的支持

• id
• class
• element
• ::after、::before

2、样式导入

/** xxx.wxss **/
@import "xxx.wxss";
.xxx {
   
  padding:15px;
}
...

wxs

WXS（WeiXin Script）是小程序的一套脚本语言，它运行在视图层，主要用于降低频繁的用户交互时视图与逻辑层中间的通信成本，提高性能。

基础写法：

<!--wxml-->
<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {
   {
   m1.message}} </view>

注意

• 基础库 2.4.4 开始支持，低版本需做兼容处理
• 目前只能响应内置组件的事件，不支