微信小程序基础心得(一)

柔光的暖阳◎ 2022-12-17 11:56 210阅读 0赞

## 微信小程序基础(一) ##

### 安装微信开发者工具 ###

[安装地址][Link 1]

下载以后进行安装

### 打开微信开发者工具 ###

打开工具以后，创建项目（选择小程序项目创建），因为是开发环境，我们没有appid，所以选择体验版，这个时候就不用输入appid

### 程序的目录结构 ###

1.  app.js
    
    在这个程序里面，它有两个部分
    
     *  onLounch程序在启动的时候会自己执行,它只会执行一次，就是程序执行的时候
     *  globalData这个代表全局数据
2.  app.json
    
    这个文件是当前的项目的配置文件，相当于我们的package.json文件在这个文件里面，几个地方需要特别注意
    
     *  page：这个选项，用来声明我们当前这个程序有多少个页面
     *  window:这个属项用来控制当前小程序的窗体信息，如果小程序的主体颜色，小程序的标题等信息
3.  app.wxss
    
    这个文件相当于全局css样式，在这里写了css样式以后，任何页面都可以直接使用里面的样式
4.  pages目录
    
    小程序里面，所有的页面都在这个里面，相当于vue程序里面的views目录或pages目录
    
    **注意**：里面的每个页面都又是一个单独的文件夹（后面详细介绍）
5.  utils目录
    
    与我们平常的utils是一样的类型，用来存放一些封装的工具与方法

### 小程序的页面结构 ###

在vue的程序里面，我们每个vue文件都有三个部分，`<template>`,`<script>`,`<style>`

而我们的小程序又是借鉴了vue的编程思想，所以它也有三个文件

<table> 
 <thead> 
  <tr> 
   <th align="center">vue类型</th> 
   <th align="center">小程序类型</th> 
   <th align="center">网页</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center"></td> 
   <td align="center">wxml</td> 
   <td align="center"> html</td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
  </tr> 
 </tbody> 
</table>

> 小程序本质上面，是把vue里面的三个部分单独的拆分出来在了一个文件，所对应的关系如上在所示
> 
> 微信小程序里面，每一个页面下面除了上在的三个文件以后，还有一个配置文件.json的配置文件…

### 微信小程序的页面配置 ###

1.  **新建页面的步骤**
    
    因为我们所有的页面都放在pages的目录下面，所以我们就从这里开始
    
     *  先新建一个空白的目录，取一个名子如**list**
     *  在新建的这个目录下面点击鼠标右键，选择新建Page,输入名称，这个时候，开发工具会自动帮我们创建四个文件`list.wxml`,`list.wxss`,`list.js`,`list.json`
     *  上面创建的这四个文件就是之前给大家提的页面的四种文件类型
     *  微信小程序的wxml
    
    wxml是微信小程序页面当中布局的地方，里面支持微信的标签库，它不支持普通的html标签库，其中常用的以下几种，我分别做对比
    
    <table> 
     <thead> 
      <tr> 
       <th>小程序标签</th> 
       <th>网页标签</th> 
       <th>说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td><code>&lt;view&gt;</code></td> 
       <td><code>&lt;div&gt;</code></td> 
       <td>块级元素的代表</td> 
      </tr> 
      <tr> 
       <td><code>&lt;text&gt;</code></td> 
       <td><code>&lt;span&gt;</code>,<code>&lt;label&gt;</code></td> 
       <td>行内元素的代表</td> 
      </tr> 
      <tr> 
       <td><code>&lt;image&gt;</code></td> 
       <td><code>&lt;img&gt;</code></td> 
       <td>行内块级元素</td> 
      </tr> 
      <tr> 
       <td><code>&lt;input&gt;</code></td> 
       <td><code>&lt;input&gt;</code></td> 
       <td>表单类型元素`</td> 
      </tr> 
      <tr> 
       <td><code>&lt;input password="true"&gt;</code></td> 
       <td><code>&lt;input type='password'&gt;</code></td> 
       <td>密码类型</td> 
      </tr> 
      <tr> 
       <td><code>&lt;textarea&gt;</code></td> 
       <td><code>&lt;textarea&gt;</code></td> 
       <td>多行文本</td> 
      </tr> 
      <tr> 
       <td><code>&lt;picker&gt;</code></td> 
       <td><code>&lt;select&gt;</code></td> 
       <td>下拉选项</td> 
      </tr> 
      <tr> 
       <td><code>&lt;radio&gt;</code>, <code>&lt;checkbox&gt;</code></td> 
       <td><code>type='checkbox'</code></td> 
       <td>单选，多选</td> 
      </tr> 
     </tbody> 
    </table>
    
    > 总结一下：微信小程序里面，wxml可以把它看成是html，但是它不是纯粹的HTML,它相当于Vue当中的组件`<view`就相当于一个view的组件,它所有的标签都是一个组件，都是基于virtual-DOM开发的
    > 
    > 因为是组件，**所以它的标签不可以出现驼峰命名**
2.  **微信小程序的样式文件wxss**
    
    在小程序里面，也是通过css来控制页在的样式的，但是它的文件叫wxss不叫css
    
    微信小程序的样式文件分为两部分
    
     *  全局样式文件 app.wxss
     *  单一页面样式文件:某一个页面文件夹下面的.wxss文件，如list.wxss这个文件的样式只作用于list.wxml这个页面
        
        单一个的页面样式，相当于vue的style加不了`scoped`闭合
     *  wxss里面采用flex弹性布局为基本–>其次采用position—>最后采用float布局
     *  微信小程序因为是运行在微信里面，所以它有注意样式的兼容性，但是我们不用考虑，因为在微信小程序的配置项里面有一个配置项postcss，我们只需要把它设置打开
     *  在微信的样式里面，如果要使用像素，推荐使用rpx样式而不使用px
        
        rpx是可变化的px，它会根据你的访问设备的像素调整大小，它有一个转换公式
        
        > 1px=1.8~2.2rpx
     *  wxss里面，支持的选择器也就是我们的css选择器，少用id多用class
3.  **微信小程序的script文件javascript(wxs)**
    
    在小程序里面，我们的所有事件，方法，生命周期等等代码都是写在.js的文件里面
    
    在这个页面的下面，都会有一个js文件，这个JS文件会调用Page()这个方法，这个方法里面接收一个对象参数`{}`
    
    在这个参数里面，有两个东西不可忽略
    
     *  data属性
    
    这个属性主要用于托管当前wxml页面上面的数据，相当于vue里面的data
    
     *  onLoad属性
        
        onLoad相当于页面加载的时候 ，只要页面被打开，都会被加载一次

### 配置微信小程序的启动页面 ###

微信小程序在启动的一瞬间，会加载app.js这个文件，然后去执行onLaunch这个方法，然后再开始加载页面

问题：

1.  如果让小程序知道那一个是首屏的页面？
2.  onLaunch这个方法到底干了些什么事情？

> 首先，微信小程序是通过app.json这个配置项来决定你小程序的配置的，并且在app.json里面，有两个非常重要的东西，第一个：pages，第二个window，而与页面相关的配置就在这个pages

我们再次打开app.json这个文件，然后会在app.json的配置项pages里面，找到我们刚刚创建的一个页面list,在这个配置项里面，**排在第一位的就是启动以后的默认页面**

### 微信小程序页面数据渲染 ###

> 微信小程序它也是一套MVVM的框架，它也是基于数据绑定来进行的，它不可以进行DOM操作，也就是说它没有`document`这一个对象。也没有alert,confirm以及prompt这个方法，它页面上面所有的数据都是通过当前目录的JS下面的data来进行操作的，我们改变data里面的数据以后，它会自动的更新到页面上去

*  双向数据绑定
    
    1.  普通渲染
        
        小程序里面，绑定数据我们使用双花括号`{ {}}`
    2.  循环列表
        
        我们使用wx:for来循环绑定，它绑定的是一个数组，循环出来的每一项默认是`item`
        
        如果要改变这个`item`，需要设置 `wx:for-item="a"`,这个时候，循环出来的每一次就都是a了
        
        循环的时候它会产生一个索引值，这个索引值是**index**,如果要改变这个index的值，那么，我们需要设置属性`wx:for-index`,如 `wx:for-index='idx'`
        
            <view wx:for="{ {userList}}" wx:for-item="a" wx:for-index='idx' wx:key="idx">{
                   {a}}-{
                   {idx}}</view>
        
        > 说明：如果没有加`wx:key`这个时候，在控制台会打印出一个警告信息
    3.  条件渲染
        
        微信在做界面渲染的时候，它可以根据某一些条件来渲染我们的页面，使用`wx-if`
        
            <view wx-if="{ {1<2}}">
                这是条件渲染
            </view>
        
        > 在vue里面，我们条件渲染有`v-if`与`v-show`两种方式，但是在微信小程序里面，它只有一种条件渲染就是`wx-if`
    
    注意事项：它与vue相比，vue在循环的时候需要使用一个key,同理，在小程序里面，它也需要一个wx:key
    
    同时，在渲染的过程当中，wx:for是小程序的循环，而vue则是`v-for="(item,index) in list"`
    
    --------------------
 *  单向数据绑定
    
    【暂时不做讲解】

### 微信小程序当中的事件 ###

在微信小程序里面，它的事件也做了一系列的封装，现在列出如下

1.  tap触摸事件
    
    这个事件相当于我们之前的click事件
    
    在事件进行绑定的时候，我们使用`bind`这一个方法来进行,例如绑定它的触摸事件是`bindtap`
    
    **注意事项**：它在进行事件绑定的时候，后面只需方法名，不要加括号。如下：
    
        <button bindtap='test'>按钮</button>
    
    上面的代码里在，它中是写了test页不是`test()`,这是一定要注意
    
    *我们现在定义了一个方法test，现在这个方法写在什么地方呢*？
    
    在当前的页面的js的文件下面，直接定义一个方法 test就可以了
    
    **wxml代码**
    
        <button bindtap='test' data-uid='h17090001'>按钮</button>
    
    **js代码**
    
        // pages/aa/aa.js
        Page({ 
        
          /** * 页面的初始数据 */
          data: { 
            userName:"杨标",
            nickName:"二当家的",
            userList:["张三","李四","王五"]
          },
        
          /** * 生命周期函数--监听页面加载 * 相当于vue里面的created() */
          onLoad: function (options) { 
            console.log("当前而被加载了");
          },
        
          /** * 这是es5的写法 */
          // test:function(){ 
        
          // }
        
          /** * 如果是es6也是可以了，只需要在project.config.json这个配置文件下面，打开es6的设置即可 */
          test(event){ 
              //这个时候，我们的data-开头的自定义属性，就都会被封装到一个dataset的属性下面
            console.log(event.currentTarget.dataset.uid);
            console.log("你点击我了");
          }
        })
    
    > **说明**：上面的方法test是被bindtap绑定的，这个时候，因为在绑定的时候不能够加`()`,所以这个方法是不接受参数，但是系统会自动的注入一个event事件参数，我们可以根据这个event参数来做一些事情，例如传参等操作
2.  bindlongtap长按事件
    
    这个事件是以前的一个长按事件，我们可以在这个事件上面做一些菜单的操作（例如长按某一个选项菜单弹出菜单），现在这个事件被微信小程序的另一个事件替代掉了
    
    > `"longtap" event is deprecated. Please use "longpress" event instead.`
    > 
    > 上面的提示告诉我们，我们的`longtap`事件已经过时，它希望我们使用`longpress`这个事件去替代
3.  bindinput表单输入绑定事件
    
    我们可以通过这个事件来获取当前这个元素所输入的值\*\*\*\*
    
    **为什么要这么做呢？**
    
    因为我们的微信小程序在做数据绑定的时候，没有像vue那样的`v-model`的表单数据绑定
    
    --------------------
    
    现在，我们写个例子，通过bindinput来做表单的数据绑定
    
    **wxml代码**
    
        <view>
          <input placeholder="请输入用户名" class='txt' bindinput='bindInputData' id='uname'></input>
          <input placeholder='请输入密码' class='txt' bindinput='bindInputData' id='pwd'></input>
          <button bindtap='getData'>确定</button>
        </view>
    
    **JS代码**
    
        Page({ 
          /** * 页面的初始数据 */
          data: { 
            uname:"",
            pwd:""
          },
          /** * 这一个方法就是通用的绑定input表单的方法 */
          bindInputData(event){ 
            var id=event.currentTarget.id;
            this.data[id]=event.detail.value;
          },
          getData(){ 
            console.log(this.data);
          }
        })

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=2018413