likes
comments
collection
share

微信小程序从入门到进阶（一）

作者站长头像
站长
· 阅读数 27

pages

所有的小程序页面，每个页面以单独的文件夹存在

  • index：index 页面文件夹，文件夹下面都包含4个基本的页面文件，这四个文件共同组成index页面
    • index.js：.js 文件 -- 页面的脚本文件，存放页面的数据、事件处理函数、生命周期等
    • index.json：.json 文件 -- 当前页面的配置文件，配置页面的外观、表现等
    • index.wxml：.wxml 文件 -- 页面的模板结构文件
    • index.wxss：.wxss 文件 -- 当前页面的样式表文件
    • utils：工具类文件夹
    • utils.js
  • app.js：小程序的项目逻辑文件，用来 注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
  • app.json：小程序公共配置文件，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
  • app.wxss：小程序公共样式表
  • project.config.json：是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置
    • setting 中保存了编译相关的配置
    • projectname 中保存的是项目名称
    • appid 中保存的是小程序的账号 ID
  • sitemap.json：配置小程序及其页面是否允许被微信索引
    • rules中保存了索引规则列表的配置
    • rules规则中，action表示页面是否能被索引(allow,disallow)，page表示生效的页面

**wxss的介绍 **

  1. WXSS
    • WXSS(WeiXin Style Sheets)是一套样式语言，用于描述WXML 的组件样式
    • 类似于网页开发中的 CSS
    • WXSS 具有 CSS 大部分的特性
  1. 新增了尺寸单位 --  rpx，一个 rpx 为页面宽度的 1 / 750
  2. 提供了全局的样式和局部样式。
  全局样式：写入到 根目录的`wxss` 中的样式
  局部样式：写入到 页面的 `wxss` 中的样式
  1. 此外 WXSS 仅支持部分 CSS 选择器
  .class（推荐使用） 和 `#id`
  element
  并集选择器和后代选择器
  ::after和::before等伪类选择器

宿主环境和运行环境

  1. 宿主环境指的是 程序运行所必须的依赖环境

    1. web 前端的宿主环境为：浏览器
    2. android 软件的宿主环境为：android 系统
    3. IOS 软件的宿主环境为：IOS系统

  2. 小程序的宿主环境是什么？ 小程序的宿主环境为：手机微信。小程序可以调用 手机微信中的扫码、支付、登录、分享等等功能

  3. 小程序的运行环境：

分成渲染层和逻辑层

其中 WXML 模板和 WXSS 样式工作在渲染层 渲染层的界面使用了WebView 进行渲染 一个小程序存在多个界面，所以渲染层存在多个WebView线程

JS 脚本工作在逻辑层。

  1. 逻辑层采用JsCore线程运行JS脚本

  2. 这两个线程的通信会经由微信客户端做中转

  3. 逻辑层发送网络请求也经由 Native（手机原生系统）转发

**小程序中完成响应式 **

在 data 中定义数据，在 wxml 中通过 {{}} 使用数据

// 在data中定义数据
// index.js
// 获取应用实例
const app = getApp()

Page({
 data: {
   product: {
     price: 10,
     num: 5
   }
 }
})

// 在wxml中使用数据
<view>
  <view>
    <!-- wxml 中访问数据，必须使用 {{}} 语法，{{}} 语法中可以放置【任意的、单一的 JavaScript 表达式】 -->  
    商品的单价：{{product.price}}
  </view>
  <view>
    商品的数量：{{product.num}}
  </view>
  <view>
    商品的总价格：{{product.price * product.num}}
  </view>
</view>

处理点击事件

想要给 button 添加点击事件则不可以使用 click 而是bindtap || bind:tap。

  <button type="primary" bind:tap="onAddNum">num + 1</button>
// 在js中定义对应的事件
 onAddNum () {
  console.log('onAddNum')
 }

修改data中的数据

需要借助一个函数 setData。

setData 接收一个 对象作为参数，这个对象就是最新的 data 数据。

其中 key 为要修改的数据， value 为最新的值

 /**
  * 定义事件处理的方法
  */
 onAddNum () {
  this.setData({
    'product.num': this.data.product.num + 1
  })

事件传参通过属性绑定（data-xx）的形式，把需要传递的参数绑定到 当前 DOM 元素中

在对应的回调函数中，通过 e.target.dataset 进行访问

形参

首先先来看 形参，对于 点击事件的回调方法 而言，默认会接收一个参数 event （事件对象）。这个 event 对象为：回调方法的唯一参数

实参

对于 小程序 中，我们不能直接为 回调方法传递实参。

而是需要通过：属性绑定的形式，把需要传递的参数绑定到 当前 DOM 元素中，绑定数据的属性需要以 data- 开头。该属性可以通过 e.target.dataset 进行访问。

// html
<button type="primary" bind:tap="onAddNum" data-step="5">num + 1</button>

// js
 onAddNum (e) {
  //  获取 data-step 的值
  let step = parseInt(e.target.dataset.step);
  this.setData({
    'product.num': this.data.product.num + step
  })
 }

实现双向数据绑定

  1. 通过 value 为 input 视图绑定数据

  2. 通过监听 bindinput 获取视图的变化，在回调方法中修改数据

// html
<view>
    商品的数量：
    <!-- 1. 创建一个【数字输入框】 -->
    <!-- 2. 设置 【商品数量】 为输入框的初始值 -->
    <input class="num-input" type="number" value="{{ product.num }}" bindinput="onInput" />
</view>
  
// js
/**
  * 3. 监听 input 的输入事件
  */
 onInput (e) {
  //  4. 获取用户输入的值
   const val = parseInt(e.detail.value);
  //  5. 赋值给【商品数量】
  this.setData({
    'product.num': val
  })

条件渲染

  1. wx:if ... wx:elif ... wx:else

  2. hidden

  3. v-if 用来控制 【组件是否会被渲染】

  4. hidden 用来控制【组件是否会被隐藏】

  5. 一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

<!-- wx:if ... wx:elif ... wx:else：判断结果为 true 则进行渲染，否则不进行渲染 -->
  <view>
    售货员小姐姐惊呼：
    <text wx:if="{{ product.price * product.num <= 100 }}">hello 帅哥</text>
    <text wx:elif="{{ product.price * product.num > 100 && product.price * product.num < 1000 }}">哇哦 有钱人哦</text>
    <text wx:else>土豪你好</text>
  </view>
  <!-- hidden：结果为 true 则隐藏，否则不隐藏 -->
  <view>
    售货员小姐姐惊呼：
    <text hidden="{{ !(product.price * product.num <= 100) }}">hello 帅哥</text>
    <text hidden="{{ !(product.price * product.num > 100 && product.price * product.num < 1000) }}">哇哦 有钱人哦</text>
    <text hidden="{{product.price * product.num < 1000}}">土豪你好</text>
  </view>

列表渲染

小程序中为我们提供了 v-for 指令，让我们进行【列表渲染】的实现。

同时也为我们提供了一个：包裹性质的容器 block 组件，当我们去循环多个元素时，可以使用 block 进行包裹，block 组件只起到包裹的其他组件的作用，本身并不会进行渲染。

// html
<!-- 
    利用 wx:for 循环渲染商品
    默认数组的当前项的下标变量名默认为 index，
    数组当前项的变量名默认为 item
   -->
  <view class="product-box">
    <block wx:for="{{ products }}" wx:key="index">
      <view class="product-item">
        <text>商品名：{{item.name}}</text>
        <text>价格：{{item.price}}</text>
      </view>
    </block>
  </view>
  
// js
data: {
   products: [
     {
       name: '苹果',
       price: 3.2
     },
     {
       name: '面包',
       price: 5.0
     },
     {
       name: '可乐',
       price: 2.5
     }
   ]
 }
转载自:https://juejin.cn/post/7286400576085082146
评论
请登录