微信小程序从入门到进阶(一)

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中使用数据

  
      
    商品的单价:{{product.price}}
  
  
    商品的数量:{{product.num}}
  
  
    商品的总价格:{{product.price * product.num}}
  

处理点击事件

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

  
// 在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


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

实现双向数据绑定

  1. 通过 valueinput 视图绑定数据

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

// html

    商品的数量:
    
    
    

  
// 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 较好。


  
    售货员小姐姐惊呼:
    hello 帅哥
    哇哦 有钱人哦
    土豪你好
  
  
  
    售货员小姐姐惊呼:
    
    
    
  

列表渲染

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

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

// html

  
    
      
        商品名:{{item.name}}
        价格:{{item.price}}
      
    
  
  
// js
data: {
   products: [
     {
       name: '苹果',
       price: 3.2
     },
     {
       name: '面包',
       price: 5.0
     },
     {
       name: '可乐',
       price: 2.5
     }
   ]
 }

你可能感兴趣的:(微信小程序,小程序)