小程序开发学习：通用基本数据封装、基本样式封装和模板代码引入

浅浅的花香味﹌ 2023-05-30 08:59 18阅读 0赞

1、首先学习的是小程序里面的事件，一般分为冒泡事件和非冒泡事件

冒泡事件：

bindtap点击事件为代表，还包括其他的冒泡事件如下：

<table> 
 <tbody> 
  <tr> 
   <td>touchstart</td> 
   <td>手指触摸动作开始</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>touchmove</td> 
   <td>手指触摸后移动</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>touchcancel</td> 
   <td>手指触摸动作被打断，如来电提醒，弹窗</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>touchend</td> 
   <td>手指触摸动作结束</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>tap</td> 
   <td>手指触摸后马上离开</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>longpress</td> 
   <td>手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.5.0</a></td> 
  </tr> 
  <tr> 
   <td>longtap</td> 
   <td>手指触摸后，超过350ms再离开（推荐使用longpress事件代替）</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>transitionend</td> 
   <td>会在 WXSS transition 或 wx.createAnimation 动画结束后触发</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>animationstart</td> 
   <td>会在一个 WXSS animation 动画开始时触发</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>animationiteration</td> 
   <td>会在一个 WXSS animation 一次迭代结束时触发</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>animationend</td> 
   <td>会在一个 WXSS animation 动画完成时触发</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>touchforcechange</td> 
   <td>在支持 3D Touch 的 iPhone 设备，重按时会触发</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.9.90</a></td> 
  </tr> 
 </tbody> 
</table>

非冒泡事件：典型的就是catchtap，他可以阻止子元素向父元素冒泡事件  
2、小程序中跳转页面一般分为两种：wx.redirectTo和wx.navigateTo

这两种都可以进行页面跳转，但是有点区别。

wx.redirectTo跳转的页面没有返回按钮，无法返回之前的页面，主要原因是出发了onUnload函数，把前页面给卸载了

/* 生命周期函数--监听页面卸载*/
    onUnload: function () {
      console.log('不能返回之前的页面，页面消失了')  
    },

wx.navigateTo跳转的页面还会保留一个返回的按钮，主要原因是触发了onHide函数，只是把之前的页面隐藏了，

/* 生命周期函数--监听页面隐藏 */
    onHide: function () {
      console.log('能返回之前的页面，只是页面隐藏了')
    },

3、通用数据文件的封装

把多个文件需要的数据放到一个js文件中，然后在所需要的文件中进行引入，这样就节省了很多的代码，首先要先创建一个js文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70][]

然后再把公用的数据放到这个文件中并且把这个文件暴露出去，供其他文件进行使用：

var post_contentData = [{
      //alt+shift+f 格式化代码数据
        date: 'Sep 11 2019',
        list_title: '虾肥蟹装时候',
        list_img: '../../images/post/crab.png',
        list_content: '这是一个新闻列表的一项，主要介绍了金秋十月阳澄湖的大闸蟹的美好和如何对介绍的情况尽心光战是多少！',
        list_like_star: '/images/icon/chat.png',
        list_star_num: 85,
        list_like_look: '/images/icon/view.png',
        list_look_num: 128,
        post_content: true
      },
      {
        date: 'Nov 25 2018',
        list_img: '../../images/post/cat.png',
        list_content: '这是一个新闻列表的一项，主要介绍了猫咪的一些特性和羊毛的好处！',
        list_like_star: '/images/icon/chat.png',
        list_star_num: 68,
        list_like_look: '/images/icon/view.png',
        list_look_num: 852,
        post_content: true
      },
      {
        date: 'Feb 11 2019',
        list_img: '../../images/post/bl.png',
        list_content: '这是比例林恩的故事，讲述的是两兄弟子站厂导航撒大声地所多所多多所所多',
        list_like_star: '/images/icon/chat.png',
        list_star_num: 14,
        list_like_look: '/images/icon/view.png',
        list_look_num: 245,
        post_content: true
      },
      {
        date: 'Spr 05 2018',
        list_img: '../../images/post/sls.jpg',
        list_content: '这是空山新雨后提阿尼腕力球，空山新雨后，天气晚来秋，明月松见着，清泉石上流',
        list_like_star: '/images/icon/chat.png',
        list_star_num: 65,
        list_like_look: '/images/icon/view.png',
        list_look_num: 785,
        post_content: true
      }
    ]
    module.exports = {
      postData: post_contentData
    }

之后要在需要的文件中引入所需要得数据，然后替换掉需要数据的变量，并且在初始生命周期函数中加载：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 1][]

4、通用模板代码和样式的封装

先分别创建wxml和wxss文件，然后在把公共的模板代码和模板所需的样式代码放到文件中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 4][]

然后要在需要的文件中引入即可，比如在post组建中引入：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 5][]

每一个wx:for中的一项都是一个item，所以要把item也通过data传递过去。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 6][]

样式代码更简单了，只需要在所需的组件中样式文件引入即可。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191108181328795.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191108181630229.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191108181954643.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191108182019969.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191108182037100.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191108182137800.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191108182348422.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ==,size_16,color_FFFFFF,t_70