2020-web前端-小程序-重新学习小程序（为uni-app做铺垫的）

我就是我 2023-03-13 06:18 1阅读 0赞

# 1.小程序的声明周期 #

//app.js
    App({ 
    
      /** * 当小程序初始化完成是。会触发onLaunch，（全局触发一次） */
      onLaunch: function () { 
        console.log("onLaunch")
      },
    
      /** * 当小程序启动，回执从后台进去前台显示，会触发onShow */
      onShow:function(options){ 
        console.log("onShow")
      },
    
      /** * 当小程序从前台进去后台，会触发onHide */
      onHide:function(){ 
        console.log("onHide")
      }
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70]

## 1.刚开始会显现`onLaunch`,`onShow` ##

## 2.只有切换到后台才会显示触发`onHide`，然后切换到前台又是出触发`onShow` ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 3]

## 3.页面的全部的生命周期 ##

// pages/index/index.js
    Page({ 
    
      /** * 页面的初始数据 */
      data: { 
    
      },
    
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
    
      },
    
      /** * 生命周期函数--监听页面初次渲染完成 */
      onReady: function () { 
    
      },
    
      /** * 生命周期函数--监听页面显示 */
      onShow: function () { 
    
      },
    
      /** * 生命周期函数--监听页面隐藏 */
      onHide: function () { 
    
      },
    
      /** * 生命周期函数--监听页面卸载 */
      onUnload: function () { 
    
      },
    
      /** * 页面相关事件处理函数--监听用户下拉动作 */
      onPullDownRefresh: function () { 
    
      },
    
      /** * 页面上拉触底事件的处理函数 */
      onReachBottom: function () { 
    
      },
    
      /** * 用户点击右上角分享 */
      onShareAppMessage: function () { 
    
      }
    })

# 2.跳转`navigator` #

<navigator url="/pages/detail/detail">打开详情页</navigator>

# 3.数据绑定 #

## 1。动态绑定数据 ##

### 1. 先在data中定义`name` ###

data: { 
        name:'张三'
      },
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
        console.log("onLoad,页面加载")
        setTimeout(()=>{ 
          this.setData({ 
            name: '李四'
          })
        },2000)
      },

*  注意：这里一定是setData(\{\}), this.setData(Object),这里是一个Object的对象

### 2.在页面中写`<view>{ {name}}</view>`,两秒过后就是显示李四了 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 4]

# 4.条件判断 #

<view wx:if="{ {is_ok}}">{ { name}}</view>
    
     data: { 
        name:'张三',
        is_ok: false
      },
      
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
        console.log("onLoad,页面加载")
        setTimeout(()=>{ 
          this.setData({ 
            name: '李四',
            is_ok: true
          })
        },2000)
      },

# 5.列表渲染 #

<view wx:for="{ {ages}}" wx:for-item="age" wx:for-index="ids">{ { age}}-{ { ids}}</view>
    
    
    
      data: { 
        name:'张三',
        is_ok: false,
        ages: [12,13,14,15]
      },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 5]

# 2.uni-app的安装 #

vue create -p dcloudio/uni-preset-vue 项目名称
    vue create -p dcloudio/uni-preset-vue test-uniapp

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 7]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 10]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20230312/e45bd03a320244efbcd39cfe62ea5828.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20230312/2277fa54f6c7474591bb7f0aaa98f506.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20230312/ca24290759e7470d8503e879272c7d3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20230312/3434516492ba4be0995f04d3d38a4b80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20230312/e626039aab26453e943338acd0dd1102.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 5]: /images/20230312/a6391a127cf74d7ea3c2cc8c9f851699.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 6]: /images/20230312/b64c2e7f374b4a669f68b556d52293f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 7]: /images/20230312/1fdd58944a484965b78207eb3781439f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 8]: /images/20230312/12ea46843fcf441f84fbcf00eb520c90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 9]: /images/20230312/1afe32909adf4373a52a2a583832f839.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 10]: /images/20230312/b96fba3eb5d54042a359b2801cf580a1.png