微信小程序入门基础（1）

向右看齐 2021-11-27 00:38 483阅读 0赞

笔记摘录

推荐一个小程序系列文章：  
[https://www.jianshu.com/p/0078507e14d3][https_www.jianshu.com_p_0078507e14d3]  
[https://segmentfault.com/a/1190000013025590][https_segmentfault.com_a_1190000013025590]

**1.小程序的文件结构**

一个小程序首先有四个应用入口文件：

*  app.js：设置一些项目的全局变量
 *  app.json：每一个新页面都必须在这个地方注册，项目的导航栏和窗口界面设置有关的
 *  app.wxss：项目全局样式
 *  project.config.json：项目配置文件

一个页面主要是包含以下四个文件，这四个文件的名字应该都是一样的，最好以页面所在的文件夹名字为标准：

*  xxx.wxml：页面的结构
 *  xxx.wxss：页面的样式
 *  xxx.json：页面的配置文件
 *  xxx.js：页面的脚本文件

页面可以嵌套页面，但是建议不要超过5个层级。

**2.rpx**

微信小程序引入rpx（responsive pixel）这个新的尺寸单位

小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。

举个例子：iPhone6屏幕宽度为375px，共750个物理像素，那么1rpx = 375 / 750 px = 0.5px。

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

像素（CSS像素和设备像素）

CSS像素又称为虚拟像素、设备独立像素或逻辑像素，也可以理解为直觉像素。CSS 像素是 Web 编程的概念，指的是 CSS 样式代码中使用的逻辑像素。比如 iPhone 6 的 CSS 像素数为 375 x 667px。

设备像素又称为物理像素。指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了。比如 iPhone 6 的分辨率为 750 x 1334px。

设备像素比（DevicePixelRatio）:DPR = 设备像素 / CSS 像素

这里的 CSS 像素其实是理想视口

例如，iPhone 6 物理像素为 750 x 1334，理想视口 375 x 667 ，DPR = 2。

**再看pt与px**

pt（point，磅）：是一个物理长度单位，指的是72分之一英寸。也叫做逻辑分辨率。  
px（pixel，像素）：通常说的像素点，物理分辨率，随着屏幕的变化不会变化；一般设计师给的设计稿是以物理分辨率为单位的。

piexl是相对大小，而point是绝对大小。

em（相对长度单位，相对于当前对象内文本的字体尺寸）：现指的是字符宽度的倍数，用法类似百分比，如0.8em，1.2em，2em等。通常1em=16px。

**3.小程序的生命周期和页面的生命周期**

应用的生命周期：

app.js

App({
      //当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
      onLaunch: function () {
    
      },
      // 当小程序启动，或从后台进入前台显示，会触发 onShow
      onShow: function (options) {
    
      },
      //当小程序从前台进入后台，会触发 onHide
      onHide: function () {
    
      },
      // 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
      onError: function (msg) {
    
      }
    })
     // 应用程序的全局变量
      globalData: {
        g_isPlaying: false,
        //  记录当前页面是否播放
        g_currentMusicPost: null,
        //  电影api地址
        doubanBase: 'https://api.douban.com'
      }

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

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

*  用户首次打开小程序，触发 onLaunch（全局只触发一次）。
 *  小程序初始化完成后，触发onShow方法，监听小程序显示。
 *  小程序从前台进入后台，触发 onHide方法。
 *  小程序从后台进入前台显示，触发 onShow方法。
 *  小程序后台运行一定时间，或系统资源占用过高，会被销毁。

页面的生命周期

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

Page()函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

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

*  小程序注册完成后，加载页面，触发onLoad方法。
 *  页面载入后触发onShow方法，显示页面。
 *  首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。
 *  当小程序后台运行或跳转到其他页面时，触发onHide方法。
 *  当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。
 *  当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload。

应用的生命周期对页面生命周期的影响

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

*  小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。
 *  当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。
 *  当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法。

小程序应用周期和页面周期参考文章：  
[https://www.jianshu.com/p/0078507e14d3][https_www.jianshu.com_p_0078507e14d3]  
[https://developers.weixin.qq.com/ebook?action=get\_post\_info&docid=0004eec99acc808b00861a5bd5280a&highline=周期][https_developers.weixin.qq.com_ebook_action_get_post_info_docid_0004eec99acc808b00861a5bd5280a_highline]

**4.路由（页面的跳转）**

在微信小程序里面跳转的方法主要有下面三种：  
1.wx.navigateTo()  
2.wx.redirectTo()  
3.wx.switchTab()

第一和第二种方法主要的区别是：前者保留当前页面(父页面，执行onHide()方法)，跳转到其他页面(子页面)，最后可以返回到当前页面(父页面)，两个页面之间是父子关系；后者关闭当前页面(执行onUnload()方法)，跳转到其他页面，无法返回，两个页面是平行关系。

第三种比较特别，这种跳转是专门跳转到带有 tabBar 的页面，并关闭其他所有非 tabBar 页面，使用上面两种跳转方式是无效的。从 tabBar 的页面跳转到非 tabBar 的页面，可以使用上面的两种方式。

**5.事件绑定与冒泡/非冒泡**

什么是事件：  
事件是视图层到逻辑层的通讯方式。  
事件可以将用户的行为反馈到逻辑层进行处理。  
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。  
事件对象可以携带额外信息，如 id， dataset， touches。

事件分为冒泡事件和非冒泡事件：  
1.冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。  
2.非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

事件绑定的写法同组件的属性，以 key、value 的形式。  
key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart  
value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

注：bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

<view bindtap='onbind'>
    我是事件2
    <view bindtap='onBind'>我是事件1</view>
    </view>
    
     onBind: function (event) {
        console.log("事件1执行了")
      },
      onbind: function (event) {
        console.log("事件2执行了")
      }

在我点击了事件1没有点击事件2的时候，事件2也会被触发，这就是冒泡；但是把方法改为catchtap，点击事件1的时候，只是事件1的函数触发，事件2函数不会被执行。还有一种catch:tap的声明事件的方法。

在编写代码中，使用频率高的事件方式是：  
单击——tap  
长按——longtap  
滑动——touchstart、touchmove、touchend、touchcancel

target和currentTarget

说到事件，就要介绍target和currentTarget的区别了。

e.target是返回触发事件的对象 e.currentTarget返回的是绑定事件的对象。  
认真看这段话：  
通常情况下target和currentTarget是一致的，我们只要使用target即可，但有一种情况必须区分这两者的关系，那就是在父子嵌套的关系中，父元素绑定了事件，单击了子元素（根据事件流，在不阻止事件流的前提下他会传递至父元素，导致父元素的事件处理函数执行），这时候currentTarget指向的是父元素，因为他是绑定事件的对象，而target指向了子元素，因为他是触发事件的那个具体对象 。

参考文章：[https://segmentfault.com/q/1010000012011798/a-1020000012015294][https_segmentfault.com_q_1010000012011798_a-1020000012015294]

**6.flex布局**

采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，成为flex项目（flex item），简称“项目”。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]  
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框 的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

flex布局容器的属性：  
flex-direction：row|column（属性决定主轴的方向）  
flex-wrap：nowrap|wrap|wrap-reverse（属性定义，如果一条轴线排不下，如何换行）  
flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式  
justify-content：属性定义了项目在主轴上的对齐方式  
align-items：属性定义项目在交叉轴上如何对齐

flex布局更多参考文章：[https://www.cnblogs.com/dreamperson/p/9367008.html][https_www.cnblogs.com_dreamperson_p_9367008.html]

参考文章：  
[https://segmentfault.com/a/1190000013025590\#articleHeader4][https_segmentfault.com_a_1190000013025590_articleHeader4]  
[https://blog.csdn.net/icessunt/article/details/79194000][https_blog.csdn.net_icessunt_article_details_79194000]

[https_www.jianshu.com_p_0078507e14d3]: https://www.jianshu.com/p/0078507e14d3
[https_segmentfault.com_a_1190000013025590]: https://segmentfault.com/a/1190000013025590
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20211126/495e42a96f14405fb9107a6e53c65b52.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20211126/24ffe6d19b9c45468289bacd83c61527.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20211126/4ef02af6e6f943ada717a9c8c5f2c6ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]: /images/20211126/4360710457d24796a7c1ac7798c21438.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]: /images/20211126/7cf208a6f7904c938084f6b1edd6bc31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]: /images/20211126/9c0f8c394fa2464b91ff46b2384d4f44.png
[https_developers.weixin.qq.com_ebook_action_get_post_info_docid_0004eec99acc808b00861a5bd5280a_highline]: https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0004eec99acc808b00861a5bd5280a&highline=%E5%91%A8%E6%9C%9F
[https_segmentfault.com_q_1010000012011798_a-1020000012015294]: https://segmentfault.com/q/1010000012011798/a-1020000012015294
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]: /images/20211126/f8c9c59f91604de98b38b5cb501ec8ca.png
[https_www.cnblogs.com_dreamperson_p_9367008.html]: https://www.cnblogs.com/dreamperson/p/9367008.html
[https_segmentfault.com_a_1190000013025590_articleHeader4]: https://segmentfault.com/a/1190000013025590#articleHeader4
[https_blog.csdn.net_icessunt_article_details_79194000]: https://blog.csdn.net/icessunt/article/details/79194000