微信小程序详解，微信小程序，微信小程序教程，微信小程序语法

2021/11/25 20:10:32

编程Tag： 程序组件微信标签页面 index 详解 wx

本文主要是介绍微信小程序详解，微信小程序，微信小程序教程，微信小程序语法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

微信小程序

主要内容：

微信小程序是什么？
开发环境准备
小程序的目录结构
小程序配置文件
模板语法

微信小程序是什么？

微信小程序，简称小程序，英文名Mini Program，是一种不需要安装即可使用的应用，它实现了应用“触手可及”的梦想。

开发环境准备

注册账号
获取APPID（开发者唯一的身份验证）（wx38a02966954367a1）
- 点击开发
- 点击开发设置
- 复制AppID并保存
开发工具（集开发、预览、调试、发布于一身的完整环境）

小程序目录结构

小程序框架提供了自己的视图层描述语言WXML（即类HTML）和WXSS（即类CSS），以及JavaScript，并在视图层与逻辑层间提供了数据传输和事件系统（即编写代码的时候不用关心操作页面结构，只需要关心数据本身），让开发者能够专注于数据与逻辑。

pages->index 首页文件
- index.js js文件
- index.json 配置文件
- index.wxml 类似于html文件
- index.wxss 类似于css文件
pages->logs 日志文件
utils->util.js 帮助文档的js（可以删除）
app.js 小程序的入口文件全局文件
app.json 全局配置文件
app.wxss 全局样式文件
project.config.json 项目的配置文件
sitemap.json 微信索引配置文件

注：传统web项目文件结构为三层（即HTML、CSS、Javascript）。而小程序是四层结构（即WXML、WXSS、Javascript、JSON），多出了一层.json配置文件。

小程序配置文件

全局配置app.json
- pages字段表明当前项目有几个子页面，配置项与pages文件夹一一对应，通过添加配置项可在pages文件夹中直接添加子文件夹，任意配置项如果出现在首行，则模拟器默认显示该配置项对应pages下的文件。
- window字段用于设置小程序的状态栏、导航条、标题、窗口背景色，全局配置。
  - navigationBarBackgroundColor HexColor 设置导航栏背景颜色，十六进制表示的颜色
  - navigationBarTitleText string 设置导航栏标题文字内容
  - navigationBarTextStyle string 设置导航栏标题颜色，仅支持 black / white
  - enablePullDownRefresh boolean 设置小程序下拉刷新功能是否开启
  - backgroundTextStyle string 设置小程序下拉刷新小圆点的背景颜色，仅支持 dark / light
  - backgroundColor HexColor 设置小程序下拉刷新区域的背景颜色，十六进制表示的颜色
- tabbar 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
  - color HexColor tab 上的文字默认颜色，仅支持十六进制颜色
  - selectedColor HexColor tab 上的文字选中时的颜色，仅支持十六进制颜色
  - backgroundColor HexColor tab 的背景色，仅支持十六进制颜色
  - position string tabBar 的位置，仅支持 bottom / top
  - custom boolean 自定义 tabBar
  - borderStyle
  - list Array tab 的列表
    - pagePath string 页面路径，必须在 pages 中先定义
    - text string tab 上按钮文字
    - iconPath string 未选中图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
    - selectedIconPath string 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
页面配置page.json

用于设置小程序的状态栏、导航条、标题、窗口背景色，局部配置，部分字段同全局配置的window字段的属性。
sitemap.json配置

sitemap.json用于配置小程序及其页面是否允许被微信索引。

模板语法

数据绑定
- 数据定义：js文件data字段中定义属性属性名：属性值
- 数据绑定：{{属性名}}
运算=>表达式

花括号中可以加入表达式，不可以加入语句，例如：算数运算、字符串拼接运算等。
列表渲染
- wx:for数组循环
  - wx:for="{{数组}}" wx:for-item=“循环项名称” wx:for-index=“循环项的索引”
  - wx:key="唯一的值"用来提高列表渲染的性能
    - wx:key 绑定一个普通字符串的时候，那么这个字符串名称肯定是循环数组中的对象的唯一属性
    - wx:key="*this"表示数组是一个普通的数组 *this表示是循环项
  - 当出现数组的嵌套循环的时候，尤其要注意以下绑定的名称不要重名
    - wx:for-item=“item” wx:for-index=“index”
  - 如果我们不写wx:for-item=“item” wx:for-index=“index”，默认情况下，小程序会把循环项的名称和索引的名称设置为item和index，即只有一层循环的时候（wx:for-item=“item” wx:for-index=“index”）可以不写。
- wx:for对象循环
  - wx:for="{{对象}}" wx:for-item=“对象值” wx:for-index=“对象的属性”
  - 循环对象的时候最好把item和index的名称都改一下 wx:for-item=“value” wx:for-index=“key”
- block标签
  - 占位符的标签
  - 写代码的时候可以看到这标签的存在
  - 页面渲染的时候会将其移出
  - 应用场景：当需要循环输出数据，但是又不想页面渲染时多出一层结构，可以使用block标签
条件渲染
- wx:if="{{true/false}}"
- if else if else
  - wx:if
  - wx:elif
  - wx:else
- hidden
  - 在标签上直接加入属性hidden
  - hidden="{{true}}"
- wx:if、hidden都有显示、隐藏元素的效果，该如何抉择呢？
  - 当标签不是频繁的切换显示时，优先使用wx:if(直接将标签从页面上移除，以达到隐藏元素的目的)
  - 当标签频繁切换显示时优先使用hidden（通过添加样式的方式来切换显示，hidden属性不要和dispaly一起使用）
小程序事件绑定
- 绑定事件：标签中添加bind+事件名=“事件处理函数”
- input事件与web中一样
- tap事件相当于web中的click事件
- data字段中的值只可以通过this.setData({属性名:属性值})进行修改
- 无法在小程序事件中直接传参
- 通过自定义属性的方式来传参
- 自定义属性传参通过事件对象获取
WXSS

WXSS样式语言（同CSS,在原来的基础上新增及优化了一些东西），用于描述WXML的组件样式。
- 尺寸单位：rpx(responsive pixel)，可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。如在iPhone6上，屏幕宽度375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。
- 小程序中的样式和css基本相同，但是它不支持通配符“*”语法
- 小程序中使用less的步骤
  - 编辑器是vscode
  - 安装插件easy less
  - 在vscode设置中加入"less.compile": {“outExt”: “.wxss”}配置
  - 在要编写样式的地方，新建less文件，如index.less，然后正常编辑即可。
常见组件
- view组件类似于div标签
- text组件类似于span标签
  - 文本标签
  - 只能嵌套text
  - 长按文字可以复制（只有该标签有这个功能）
  - 可以对空格、回车进行编码
- img组件图片标签不同于html
  - 图片标签，image组件默认宽度320px，高度240px
  - 支持懒加载
- swiper组件
  - 轮播图外层容器 swiper
  - 每一个轮播项 swiper-item
  - swiper标签存在默认样式
    - width 100%
    - height 150px
    - swiper高度无法由内容撑开
  - 计算swiper高度
    - 先找出原图的宽度和高度，等比例给swiper定宽度和高度
  - swiper属性
    - autoplay boolean 自动轮播
    - interva number 自动切换时间间隔
- navigator导航组件
  - navigator组件类似html中的a标签
  - url 要跳转的页面路径绝对路径相对路径
  - 块级元素可以设置宽、高默认会换行
  - target 要跳转到当前的小程序还是其它的小程序
    - self 默认值自己的小程序页面
    - miniProgram 其他的小程序页面
  - open-type 跳转的方式
- rich-text 富文本标签类似vue中的v-html功能
  - node属性
    - 接收标签字符串
    - 接收对象数组
- button组件
  - size控制按钮大小
  - type控制按钮的颜色
  - plain控制按钮是否镂空
  - loading名称前是否添加loading图标
  - open-type：
    - contact 直接打开客服对话功能，需要在微信小程序的后台配置
    - share 转发当前的小程序到微信朋友中，不能把小程序分享到朋友圈
    - getPhoneNumber 获取当前用户的手机号码信息，结合一个事件来使用，不是企业的小程序账号，没有权限获取用户的手机号码
      - 绑定一个事件bindgetPhonenumber
      - 在事件的回调函数中通过参数获取用户的手机信息
      - 获取到的信息已经加密过了
      - 注意：需要用户自己搭建小程序的后台服务器，在后台服务器中进行解析手机号码，返回到小程序中就可以看到信息了
    - getUserInfo 获取当前用户的个人信息
      - 使用方法，类似获取用户的手机号码
      - 可以直接获取，不存在加密的字段
    - launchApp 在小程序当中直接打开app
      - 需要在app中通过app的某个链接打开小程序
      - 在小程序中再通过这个功能重新打开app
    - openSetting 打开小程序内置的授权页面
      - 授权页面只会出现用户曾经点击过的权限
    - feedback 打开小程序内置的意见反馈页面
- icon组件用于设置字体图标
  - type 图标类型
  - size 图标尺寸
  - color 图标颜色
- radio单选按钮
  - 可以通过color属性改变颜色
  - value 选中单选框的值
  - 需要搭配radio-group一起使用
- checkbox复选框标签
  - 可以通过color属性来修改颜色
  - 需要搭配checkbox-group一起使用
自定义组件
- 组件的使用过程
  - 创建组件
  - 声明组件，在需要使用组件页面的json文件引入组件
  - 使用组件
- 组件通信
  - 父组件向子组件传递数据通过标签属性进行传递
  - 子组件可通过properties属性进行接收
  - 子组件向父组件传递数据是通过事件的方式传递的，triggerEvent
  - 在子组件的标签上加入一个自定义事件
  - 子组件通过bind+事件名="函数名"进行接收
组件生命周期

组件生命周期即小程序内置事件，这些事件在特定的时刻触发，组件生命周期分为应用生命周期及页面生命周期。
- 应用生命周期即小程序的入口文件app.js
  - onLaunch()应用第一次启动的时候就会触发事件，可以用来获取用户信息
  - onShow()应用显示时触发，可以对应用的数据或页面效果重置
  - onHide()应用被隐藏时触发，可以暂停或者清除定时器
  - onError()在应用发生代码报错的时候，收集用户的错误信息，通过异步请求，将错误的信息发送后台
  - onPageNotFound页面找不到就会触发
    - 应用第一次启动的时候，如果找不到第一个入口页面，就会触发
- 页面生命周期

这篇关于微信小程序详解，微信小程序，微信小程序教程，微信小程序语法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！