小程序开发入门到实践

雨点打透心脏的1/2处 2022-12-22 11:24 128阅读 0赞

### 文章目录 ###

*  一、什么是小程序？
 *  二、开发工具
 *   *  1.小程序开发者工具
     *  2.文件目录结构
     *  3.页面生命周期
     *  4.路由跳转

--------------------

# 一、什么是小程序？ #

微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

[https://mp.weixin.qq.com/cgi-bin/wx][https_mp.weixin.qq.com_cgi-bin_wx]

# 二、开发工具 #

## 1.小程序开发者工具 ##

这个工具集成了公众号网页调试和小程序调试两种开发模式。我这里使用了Beta版本，没有用正式版。因为我想体验使用其中的Git版本管理功能。下载地址：  
[https://developers.weixin.qq.com/miniprogram/dev/devtools/beta.html  
][https_developers.weixin.qq.com_miniprogram_dev_devtools_beta.html]

下载安装好后，先要微信扫描登录。然后选择小程序项目。

![在这里插入图片描述][70_pic_center]  
新建小程序项目。  
![在这里插入图片描述][70_pic_center 1]  
选择新建小程序的项目目录，AppID没有注册的话，可以先点击下面的使用测试号即可，不影响开发。

大致的工具界面如下图，新版有版本管理。红色圈起来的为小程序项目的一个页面包含的元素：  
![在这里插入图片描述][70_pic_center 2]  
工具用起来很方便、简单、直接。详细用法就不说了，主要的功能大概说下。左侧是模拟器，可以模拟安卓手机和苹果手机的效果，因为有些小程序组件在安卓和苹果上显示是有区别的，大家可以注意下。圈红的为小程序一个页面的基本组成文件元素：xx.js、xx.wxml、xx.wxss、xx.json。其实就是有JS文件、HTML文件（xx.wxml）、CSS样式文件（xx.wxss）和配置文件（xx.json）组成，非常的容易理解。我们就是在使用小程序的组件、控件来绘制UI布局，主要是xx.wxml和xx.wxss文件。xx.js负责生命周期函数和事件处理，例如：点击事件、数据请求、数据绑定等等逻辑操作。

我们在编写完后，可以点击工具栏上的预览按钮，扫描二维码在真机上体验，也可以直接用左侧的模拟器时时预览即可。

看完了工具，我们看下基本开发的要素和需要注意的问题吧，以免新手再次重蹈覆辙。

## 2.文件目录结构 ##

看下默认的新建后的结构：  
![在这里插入图片描述][70_pic_center 3]  
app.json是小程序全局配置文件，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

大致代码结构如下：

{ 
      "pages":[
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window":{ 
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"black"
      }
    }

pages是配置小程序所有页面，类似于注册清单。window是全局的窗口配置，如颜色、标题等等。当然每个页面也可以自己单独配置，就是页面名称.json文件。例如：page.json。不过需要注意的是，单独页面配置的json无需写window这个关键字，直接如下代码所示：

{ 
      "backgroundTextStyle": "light",
      "navigationBarBackgroundColor": "#34495e",
      "navigationBarTitleText": "日记",
      "navigationBarTextStyle": "white",
      "enablePullDownRefresh": true,
      "backgroundColor": "#34495e"
    }

那么再看工具配置文件project.config.json。

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。具体详细配置大家可以看小程序官方文档有详细介绍。

还有一个app.wxss和app.js。这个app.wxss就是全局的样式文件，也就是css文件，当然和页面配置文件一样，每个页面可以单独写页面名称.wxss。

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

此外 WXSS 仅支持部分 CSS 选择器

再来看app.js，很明显是一个js文件。负责UI交互、数据绑定更新、网络请求、页面生命周期等等操作相关的都在这里。当然每个页面都有自己单独的.js文件，这个app.js可以做一些需要全局共享和操作的逻辑在里面。在这里可以调用微信小程序的很多API，也可以自己写js方法使用。

那么我们看下一个页面的组成，基本上就是下图这些结构元素。有界面、有样式、有js交互、有配置。  
![在这里插入图片描述][70_pic_center 4]  
每新增一个页面都要在app.json里添加注册进去。

一个.js文件里有生命周期的管理函数，可以在这里面做相应的操作。

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

我们看下最简单的一个index.wxml页面，可以当做是Html页面，只有一个text控件，里面的bindtap就是点击事件的绑定。

<view class="container">
      <view class="usermotto">
        <text class="user-motto" bindtap='click'>{
       {motto}}</text>
      </view>
    </view>

那么这个class就是index.wxss里的样式文件。里面的\{ \{motto\}\}就是指向index.js里的data里定义的一个变量。小程序都是通过\{ \{…\}\}两个大括号包括一个英文名字来进行变量绑定的。这样我们就可以动态更换里面的显示内容了。那么怎么更新内容呢？

在js里使用下面的this.setData方式动态更新刷新数据：

this.setData({  motto: "名字" })

/**index.wxss**/
    .userinfo { 
      display: flex;
      flex-direction: column;
      align-items: center;
    }
     
    .userinfo-avatar { 
      width: 128rpx;
      height: 128rpx;
      margin: 20rpx;
      border-radius: 50%;
    }
     
    .userinfo-nickname { 
      color: #aaa;
    }
     
    .usermotto { 
      margin-top: 200px;
    }

再看下index.js文件。

//index.js
    //获取应用实例
    const app = getApp()
     
    Page({ 
      data: { 
        motto: 'Hello World',
      },
      
      //事件处理函数
      click: function() { 
        wx.navigateTo({ 
          url: '../logs/logs'
        })
      },
        
    })

Page函数是必须要有的，里面包含data:\{ … \}，用于放置数据、常量、变量等等。这里的click:function就是我们定义的点击事件。wx.navigateTo…方法就是小程序的官方API，具体其他API的用法和返回参数是什么可以看官方API文档，很详细。

观察下，上面有个声明了app这个常量。这个就是app.js里拿到的全局管理调用app.js里的方法和常量用的。很多需要存储和全局读写、处理的都可以进行操作以及放置在app.js里。在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。通过全局函数 getApp() 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置。

Page({ 
      data: {  // 参与页面渲染的数据
        logs: []
      },
      onLoad: function () { 
        // 页面渲染后执行
      }
    })

小程序的组件和控件有很多，可以看做是Html的标签，对称方式使用。具体组件特性看官方文档：  
[https://developers.weixin.qq.com/miniprogram/dev/component/][https_developers.weixin.qq.com_miniprogram_dev_component]

## 3.页面生命周期 ##

页面的生命周期,这个比较重要，大家可以看下理解下。

看下逻辑层需要注意的。除了页面的生命周期，还有页面的监听事件。onPullDownRefresh()：监听用户下拉刷新事件。

需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。  
可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。  
当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onReachBottom()：监听用户上拉触底事件。

可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance，默认为50px。  
在触发距离内滑动期间，本事件只会被触发一次。

onPageScroll(Object)：监听用户滑动页面事件。

onShareAppMessage(Object)：

监听用户点击页面内转发按钮（ 组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容。

注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮。

onTabItemTap(Object)：点击 tab 时触发。

Page.prototype.setData(Object data, Function callback)：setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。

其中 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array\[2\].message，a.b.c.d，并且不需要在 this.data 中预先定义。

注意：

直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。  
仅支持设置可 JSON 化的数据。  
单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。  
请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

## 4.路由跳转 ##

接下来看下小程序里的路由、跳转。

主要有这几种方式：  
![在这里插入图片描述][70_pic_center 5]  
这几种方式url都可以传递参数。

wx.navigateTo：保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。注意：目前页面路径最多只能十层。

wx.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面。如果你想让页面没有返回按钮，不能返回的话，就用这个跳转方式吧。

wx.reLaunch(OBJECT)：关闭所有页面，打开到应用内的某个页面。

wx.switchTab(OBJECT)：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

wx.navigateBack(OBJECT)：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

注意：

1、navigateTo, redirectTo 只能打开非 tabBar 页面。  
2、switchTab 只能打开 tabBar 页面。  
3、reLaunch 可以打开任意页面。  
4、页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。  
5、调用页面路由带的参数可以在目标页面的onLoad中获取。

[https_mp.weixin.qq.com_cgi-bin_wx]: https://mp.weixin.qq.com/cgi-bin/wx
[https_developers.weixin.qq.com_miniprogram_dev_devtools_beta.html]: https://developers.weixin.qq.com/miniprogram/dev/devtools/beta.html
[70_pic_center]: /images/20221120/147346621ec94d80a34f34a952d984b6.png
[70_pic_center 1]: /images/20221120/b4a08756df0345768a76bb05485a1a04.png
[70_pic_center 2]: /images/20221120/dc2a28d8fb0747d3b4425d17ee25eaaf.png
[70_pic_center 3]: /images/20221120/9e548bc4c3e043c3b327199303ffe4cd.png
[70_pic_center 4]: /images/20221120/9516565a00584ef18eafe96f895b2d6e.png
[https_developers.weixin.qq.com_miniprogram_dev_component]: https://developers.weixin.qq.com/miniprogram/dev/component/
[70_pic_center 5]: /images/20221120/ff045258e5d347938fa89a5caefaa203.png