基于有Vue基础的微信小程序开发学习笔记

微信小程序开发

一、微信小程序介绍

官方开发文档

• 注册小程序

• 获取APPID

• 下载开发工具

二、小程序结构目录

• 小程序框架

  小程序框架提供了自己的视图描述语言 WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑

1.小程序的文件结构

结构	传统web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	Javascript	Javascript
配置	无	JSON

2.基本项目目录

三、配置文件详解

官方文档

1.全局配置文件

• pages配置项

  • 作用：配置页面信息
  • 小技巧：在官方开发者工具中修改pages配置项，新增一个页面，开发者工具会自动为你创建页面所需的四个文件

  "pages":[
      "pages/index/index",  //这里不需要后缀名，该数组第一个即为应用默认显示页面
      "pages/logs/logs"
  ],
  

• window配置项

  • 作用:设置小程序的状态栏、导航条、标题、窗口背景色。

  "window":{
      "backgroundTextStyle":"light",  //下拉 loading 的样式，仅支持 dark / light
      "navigationBarBackgroundColor": "#fff",  //导航栏背景颜色
      "navigationBarTitleText": "Weixin",  //导航栏标题文字内容
      "navigationBarTextStyle":"black",  //导航栏标题颜色，仅支持 black / white	
      "enablePullDownRefresh":true,  //是否开启全局的下拉刷新 默认false
      "backgroundColor":"#ffffff"  //窗口的背景色
  },
  

• tabBar配置项

  • 作用：如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面

  "tabBar": {   //小程序下方导航配置
      "list": [   //tab 的列表，最少 2 个、最多 5 个 tab	
        {
          "pagePath": "pages/index/index",  //导航跳转到页面路径
          "text": "首页",  //导航标题
          "iconPath": "icon/_home.png",  //导航图标（未被选中）
          "selectedIconPath": "icon/home.png"  //被选中的图标
        },
        {
          "pagePath": "pages/search/search",
          "text": "搜索",
          "iconPath": "icon/_search.png",
          "selectedIconPath": "icon/search.png"
        }
      ],
      "color":"#bfa",  //tab 上的文字默认颜色，仅支持十六进制颜色
      "selectedColor":"#fff", //tab 上的文字选中时的颜色，仅支持十六进制颜色
      "backgroundColor":"#fff"  //tab 的背景色，仅支持十六进制颜色
    },
  

2.页面配置文件

在每个页面中分别配置其独特的样式属性等，具体方法参考上述全局配置及官方文档（xxx/xxx.json）

3.sitemap配置

四、WXML

1、数据绑定

1.1.列表循环（类似于v-for指令）

<view wx:for="{{list}}" vx:for-item="item" vx:for-index="index" vx:key="item.id">{{index}}---{{item.name}}</view>
<!-- 
	如果不指定vx:for-item="item" vx:for-index="index"，则默认为item和index
	vx:key="*this" 
-->

1.2block标签

相当于<template></template>

1.3条件渲染

wx:if wx:elif wx:else 相当于v-if/v-else-if/v-else

hidden 相当于 v-show

2.事件绑定

2.1输入框值改变事件

<input type="text" bindinput="test" />

data:{
  num:0  
},
test(e){
    //与data平级
    //e.detail.value  获取输入框中的值
    //为data中的数据赋值
    this.setData({
        num:e.detail.value
    })
}

2.2点击事件

<button bindtap="add" data-addnum="{{3}}">+</button>
<!-- 注意：无法像Vue一样传参，需要使用自定义属性data-xxx -->

add(e){
    //获取自定义属性 e.currentTarget.dataset.addnum
    num:this.data.num+e.currentTarget.dataset.addnum
}

五、WXSS

1.尺寸单位

• rpx (responsive pixel) :可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。

• 如在iPhone上，屏幕宽度为375px,共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素

• 1px=750/pageWidth rpx

2.样式导入

• WXSS支持样式导入

• 可以与less中的导入混用

• 使用@import语句可以导入外联样式表，只支持相对路径

/*在.wxss文件中*/
@import "相对路径";

3.选择器

• 不支持 *

4.WXSS使用less

• 使用VScode插件 easy less

• 配置

  "less.compile":{
      "outExt":".wxss"
  }
  

六、常见组件

1.view

• 相当于<div></div>

• 属性：

  • hover-class: 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
  • hover-stop-propagation: 指定是否阻止本节点的祖先节点出现点击态 (即事件冒泡)

2.text

• 相当于<span></span>

• 特别的：里面只能嵌套自身

• 长按文字可以复制（只有这个标签有这个功能）

• 可以对空格、回车进行编码

• 属性：

  • user-select ：文本是否可选，该属性会使文本节点显示为 inline-block
  • decode ：是否解码

3.image

• 图片标签，image组件默认宽度320px、高度240px

• 支持懒加载

• 属性：

  • src： 图片资源地址

  • mode： 图片裁剪、缩放的模式

  • 合法值	说明
    scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
    aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
    aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
    widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
    heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
    top	类似于backgroud-position
    …

  • webp : 默认不解析 webP 格式，只支持网络资源

  • lazy-load : 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载

4.swiper，swiper-item

• 轮播图组件
• swiper，swiper-item类似于ul和li的关系
• swiper无法实现被内容撑开，根据原图比例，手动为其加宽高属性
• 属性：
  • autoplay ： 是否自动切换
  • interval ： 自动切换时间间隔
  • circular ： 是否采用衔接滑动
  • indicator-dots ： 是否显示面板指示点
  • indicator-color ： 指示点颜色
  • indicator-active-color ： 当前选中的指示点颜色

5.navigator

• 导航组件，类似超链接标签
• 块元素
• 属性：
  • url ： 当前小程序内的跳转链接
  • target ：在哪个目标上发生跳转，默认当前小程序self/miniProgram
  • open-type：跳转方式

6.rich-text

• 相当于v-html的功能
• 属性：
  • nodes： 节点列表/HTML String

7.button

• 属性：

  • size ：按钮的大小default/mini

  • type：按钮的样式类型primary/default/warn

  • plain：按钮是否镂空，背景色透明

  • disabled：是否禁用

  • open-type：微信开放能力！！！！！！！！！！！！！

    合法值	说明
    contact	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息
    share	触发用户转发
    getPhoneNumber	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息
    getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 （小程序插件中不能使用）
    launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数
    openSetting	打开授权设置页
    feedback	打开“意见反馈”页面
    chooseAvatar	获取用户头像，可以从bindchooseavatar回调中获取到头像信息

8.icon

• 图标字体

• 属性：

  • type：icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
  • size：icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。
  • color：icon的颜色，同css的color

• 

9.radio

• 单选
• 属性：
  • value：radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value
  • checked：当前是否选中
  • disabled：是否禁用
  • color：radio的颜色，同css的color

10.checkbox

同上

11.自定义组件

• 创建

  • 在components/xxx下创wxml,wxss,js,json四个文件
  • 添加配置"component":true

• 使用组件

  • 配置

    "usingComponents":{
        "Test":"../../components/Test/Test"  //到文件夹即可
        
    }
    

  • 使用

    <Test></Test>
    

七、小程序的生命周期

1.小程序生命周期

//应用第一次启动
onLaunch(){}
//应用被用户看到
onShow(){}
//应用被隐藏
onHide(){}
//应用发送错误时
//可以通过这个回调，在应用发送错误时，收集错误信息，通过异步请求，将错误发送到后台去，便于问题修复，版本更新
onError(err){}
//页面找不到,第一次启动时，找不到入口页面，才会触发
onPageNotFound(){}

2.页面生命周期

onLoad()  //监听页面加载
onShow()  //监听页面显示
onReady() //监听页面初次渲染完成
onHide()  //监听页面隐藏
onUnload  //监听页面卸载
onPullDownRefresh()  //监听用户下拉
onReachBottom()  //监听页面上拉触底
onShareAppMessage()  //监听用户点击转发
onPageScroll()  //监听页面滚动
onResize()  //监听页面尺寸改变,横屏竖屏切换
onTabItemTap()  //当前是tab页时，监听tab点击