2021-03-07-微信小程序基础

一、配置文件

全局配置文件app.json

pages

存储小程序中存在的页面，编辑pages可以自动添加或删除小程序里的页面，但必须编辑并且保存文件。

window

控制所有页面窗口的样式等内容
1.navigationBarBackgroundColor： 控制导航栏的背景颜色
2.navigationBarTitleText：控制导航栏标题内容
3.enablePullDownRefresh：控制页面是否支持下拉刷新功能

tabBar

控制所有页面下方导航栏的信息
list：表示导航栏中单个图标
	pagePath：图标指向的页面
	text：图标下的指示文字
	iconPath：图标图片路径
	selectedIconPath：图标被选中时图片路径
color：图标未被选中时字体颜色
selectedcolor：图标被选中时字体颜色
backgroundColor：导航栏背景颜色

页面配置文件（页面名.json）

页面配置相当于全局配置中的window的配置
他是针对单个页面进行设置的，会覆盖全局配置中的设置

stiemap配置

微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。

二、模板语法

数据绑定

数据绑定指的是小程序页面中的数据与事先写好的在js文件中的数据进行绑定

js文件中数据写入格式

• 在js文件中的page下的data中依照json的数据格式填写
• 数据类型可以是：字符串，数字，bool类型，对象
  

wxml文件中调用数据方法

• 对于在data下一级的数据：{{数据名}}
• 对于非data下一级数据：{{数据名.数据名…}}
• 被调用的数据可以作为表现的属性，当标签的属性为bool类型时引号与大括号间不能有空格

运算

在{{}}中不仅可以调用js中的数据，还可以进行一些运算：加减乘除、字符串的拼接，三目运算

数组和对象循环

条件渲染

注意：hidden不要和css的display一块使用

事件绑定

• 当我们要给某个标签绑定事件时，关键字是bind+时间名
• 获取标签属性要用事件源对象来获取
• data里的数据获取：this.data.变量名 ,更改应该用this.setData方法
• 当我们需要给事件传参时，应给标签添加自定义属性
  
  
  

三、wxss

尺寸单位

• 小程序中 不需要主动来引入样式文件
• 需要把页面中某些元素的单位 由 px 改成 rpx
  • 设计稿 750x
    750 px = 750 rpx
    1 px = 1 rpx
  • 把屏幕宽度 改成 375px
    375 px = 750 rpx
    1 px = 2rpx
    1rpx = 0.5px
• 存在一个设计稿 宽度 414 或者 未知 page
  • 设计稿 page 存在一个元素 宽度 100px
  • 拿以上的需求 去实现 不同宽度的页面适配
  • page px = 750 rpx
    px = 750 rpx / page
    100 px = 750 rpx * 100 / page
    假设 page = 375px
• 利用 一个属性 calc属性 css 和 wxss 都支持 一个属性
  • 750 和 rpx 中间不要留空格
  • 运算符的两边也不要留空格

    height: calc((750rpx*324)/458);

引入wxss

• 使用@import来引入其他wxss文件
• 引入是要使用相对路径

@import "../../styles/style01.wxss";

选择器

• 标签选择器 ：直接写标签名
• 类选择器 .类名
• id选择器 #id
• 属性选择器 ::after

四、常见组件

view

相当于web中的div

srcoll-view

• 该组件比view多了一个功能
• 当该组件高度固定时，可以甚至横向或纵向滚动
• srcoll-x：横向 srcool-y:纵向

text

• 文本标签
• 只能嵌套text标签
• 长按可复制文本（只有这个标签可以） 添加selectable属性
• 可以对空格和回车进行编码 添加decode属性

image

• src 指图片的加载路径，一般小程序只支持外网图片，不要再小程序里加入图片
• mode 决定图片内容如何与图片标签做适配
  • 首先小程序中图片的默认宽是320px，高时240px
  • scaleToFit:强行把图片宽高填满image元素
  • aspectFit:保持宽高比，确保让图片贴着短边，常用在轮播图上
  • aspextFill:保持宽高比，确保让图片贴着长边，不常用
  • widthFix：无视image的height，保持图片的宽高比，保持图片宽度为image标签宽度
  • top：不改变图片大小及宽高比，让图片贴着image标签顶部
  • botton,left,right,top left等与top作用类似、
• 小程序里直接就支持懒加载，添加属性lazy-load即可
  • lazy-load 自己判断图片在 视口高度的三倍以内的时候，就会加载图片

swiper

navigator(类似于web中的超链接)

• 块级元素 会默认换行 可以直接加宽度和高度
• url 要跳转到界面的路径 绝对路径和相对路径都行
• target 要跳转页面时本小程序的self还是其他小程序的miniProgram
• open-type 跳转的方式
  • navigate 保留当前页面，跳转到应用的某个页面，不能跳转到tabbar页面
  • redirect 关闭当前页面，跳转到应用的某个页面，不能跳转到tabbar页面
  • switchTab 关闭所有非tabbar页面，跳转到某个tabbar页面
  • reLaunch 关闭所有页面，跳转到应用的某个页面
  • navigateBack 关闭当前页面，返回上一或多级页面，可以通过getCurrentPages()获取当前页面栈，决定需要返回几层
  • exit 退出小程序，target="miniProgram"时有效

rich-text

• nodes 该属性用来实现html代码在小程序里的适配：
  • 接收html标签字符串
  • 接收对象数组

<rich-text nodes="{{html1}}"></rich-text>
<rich-text nodes="{{html2}}"></rich-text>

block

渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素,当我们想要循环显示或条件渲染显示一些文字但不想让他出现标签，我们聚可以使用block标签，他只在编程时出现，在显示页面中消失

<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

button(按钮)

icon

radio

checkbox

• checkbox在进行事件绑定时也需要在checkbox-group父标签之中，事件也是bindchange
  
  

input

没什么好说的，和之前的input一样，但是要注意一点：在小程序里的input标签必须要写反斜杠

五、自定义组件

创建自定义组件

• 在小程序根目录下创建Components文件夹
• 在Components文件夹中创建自定义组件的文件夹
• 在其中添加js,json,wxml,wxss四个文件
• 在json文件中添加"component":true 字段，表明该文件为自定义组件
• 需要使用时在调用该组件的页面的json文件里的usingComponents中声明
• 组件也可以使用组件
  

自定义组件的作用

自定义组件可以看成是java程序中的方法，在小程序中有些东西需要我们重复编写时，就可以采用组件来自己写一下，简化程序

自定义组件的的事件

• 绑定事件需要在需要在methods中绑定
• const tabs=this.data.tabs 等价于 const {tabs}=this.data
• const {operation}=e.currentTarget.dataset 等价于 const operation=e.currentTarget.dataset.operation
• 数组的循环foreach写法：数组名.foreach((变量名,索引值)=>要写的程序);

父页面向子组件传递数据

• 0通过组件标签的属性值来向子组件传递数据
• 1父页面调用组件时给标签添加自定义属性
• 2子组件通过js中的properties来接收数据，数据会自动添加到子组件的data中
• 3子组件就可以像使用data里的数据一样来使用父页面传给他的数据
  

子组件向父页面传递数据

• 0子组件通过事件绑定的方法给父页面传递数据
• 1触发父组件的自定义事件
  • this.triggerEvent(“自定义事件的名称”,要传递的数据);
• 2给父组件添加自定义事件

<tabs tabs={{tabs}} bind自定义事件的名字="方法名" ></tabs>

• 3编写事件触发的方法

slot标签

组件的其他属性

六、小程序的生命周期

app生命周期

//小程序启动时出发事件
  onLaunch(){
    console.log("onLaunch");
  },
  //小程序页面显示时触发事件，该事件通常用作用户回到该程序时刷新数据
  onShow(){
    console.log("onShow");
  },
  //小程序页面被移除时触发该事件，该事件通常用作用户做其他事情时暂停或关闭计时器
  onHide(){
    console.log("onHide");
  },
  //小程序报错时触发该事件,可打印报错信息
  onError(err){
    console.log("onError");
    console.log(err);
  },
  //小程序首页找不到时触发该事件，一定要是首页
  onPageNotFound(){
    wx.navigateTo({
      url: '/pages/index/index'
    })
  }

页面生命周期

生命周期图解