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

2021/11/25 20:10:32

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

微信小程序

主要内容:

  1. 微信小程序是什么?
  2. 开发环境准备
  3. 小程序的目录结构
  4. 小程序配置文件
  5. 模板语法

微信小程序是什么?

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

开发环境准备

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

小程序目录结构

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

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

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

小程序配置文件

  1. 全局配置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,不支持网络图片。
  2. 页面配置page.json

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

  3. sitemap.json配置

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

模板语法

  1. 数据绑定

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

    花括号中可以加入表达式,不可以加入语句,例如:算数运算、字符串拼接运算等。

  3. 列表渲染

    • 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标签
  4. 条件渲染

    • 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一起使用)
  5. 小程序事件绑定

    • 绑定事件:标签中添加bind+事件名=“事件处理函数”
    • input事件与web中一样
    • tap事件相当于web中的click事件
    • data字段中的值只可以通过this.setData({属性名:属性值})进行修改
    • 无法在小程序事件中直接传参
    • 通过自定义属性的方式来传参
    • 自定义属性传参通过事件对象获取
  6. 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,然后正常编辑即可。
  7. 常见组件

    • 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一起使用
  8. 自定义组件

    • 组件的使用过程
      • 创建组件
      • 声明组件,在需要使用组件页面的json文件引入组件
      • 使用组件
    • 组件通信
      • 父组件向子组件传递数据通过标签属性进行传递
      • 子组件可通过properties属性进行接收
      • 子组件向父组件传递数据是通过事件的方式传递的,triggerEvent
      • 在子组件的标签上加入一个自定义事件
      • 子组件通过bind+事件名="函数名"进行接收
  9. 组件生命周期

    组件生命周期即小程序内置事件,这些事件在特定的时刻触发,组件生命周期分为应用生命周期及页面生命周期。

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


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


扫一扫关注最新编程教程