微信小程序基础

搭建小程序项目

项目架构

通过小程序开发者工具自动初始化一个项目，项目框架如下所示：

pages：存放所有小程序的页面
utils：存放工具性质的模块 (例如:格式化时间的自定义模块)
app.js：小程序项目的入口文件
app.json：小程序项目的全局配置文件
app.wxss：小程序项目的全局样式文件
project.config.json：项目的配置文件
sitemap.json：配置小程序及其页面是否允许被微信索引

每个page页面都包含4部分，分别如下所示：

.js 文件：页面的脚本文件，存放页面的数据、事件处理函数等
.json 文件：当前页面的配置文件，配置窗口的外观、表现等
.wxml 文件：页面的模板结构文件
.wxss 文件：当前页面的样式表文件

每个小程序都有一个app.json文件，进行全局配置。

pages：所有页面及路径
window：全局定义小程序所有页面的背景色及文字颜色等
style：全局定义小程序样式版本

宿主环境

宿主环境 (host environment) 指的是程序运行所必须的依赖环境。例如:Android 系统和 ios 系统是两个不同的宿主环境。安卓版的微信 App 是不能在 ios 环境下运行的，所以，Android 是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的。

小程序的宿主环境指的是手机微信，小程序可以调用宿主环境的各个功能。

常用组件及API

组件

text

作用：类似于HTML中的span标签，属于行内元素。selectable 属性支持实现长按选中文本内容的效果。

arduino 复制代码

<text selectable>长按选中文本</text>

rich-text

作用：富文本组件，支持把HTML结构渲染为WXML结构

arduino 复制代码

<rich-text nodes="<h1 class="my-style">HTML代码</h1>"></rich-text>

view

作用：普通视图区域，类似于HTML中的div标签，属于块级元素，可以快速实现页面布局

scroll-view

作用：可滚动的视图区域，类似于HTML中的div标签，属于块级元素，可以实现滚动列表布局

swiper和swiper-item

作用：实现轮播图和轮播图item组件

swiper组件常用属性如下所示：

indicator-dots：是否显示面板指示点
indicator-color：指示点默认颜色
indicator-active-color：指示点选中颜色
autoplay：是否自动切换
interval：自动切换的时间间隔
circular：是否采用衔接滑动

button

作用：按钮组件，支持多种属性配置

type：按钮类型
size：按钮尺寸
plain：镂空按钮样式

image

作用：图片标签，src属性表示图片地址

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

生命周期

应用生命周期

javascript 复制代码

App({
    // 小程序初始化完成时执行，全局只触发一次,可以做一些初始化的工作
    onLaunch: function(options) {}
    // 小程序启动，或从后台进入前台显示时触发
    onShow: function(options) {}
    // 小程序从前台进入后台时触发
    onHide: function() {}
})

页面生命周期

javascript 复制代码

Page({
  onLoad: function(options){}, // 监听页面加载，一个页面只调用1次
  onShow: function(){}, // 监听页面显示
  onReady: function(){}, // 监听页面初次渲染完成，一个页面只调用1次
  onHide: function(){}, // 监听页面隐藏
  onUnload: function(){} // 监听页面卸载，一个页面只调用1次
})

页面导航

<navigator>声明式导航

ini 复制代码

<navigator 
  url="/pages/message/message?name=zs&age=20" 
  open-type="switchTab"
>导航到消息页面</navigator>

<navigator 
  url="/pages/info/info?name=zs&age=20" 
  open-type="navigate"
>导航到info页面</navigator>

<navigator 
  open-type='navigateBack' 
  delta='1'
>返回上一页</navigator>

编程式导航

scss 复制代码

// 跳转到tab页面
goMessage(){
 wx.switchTab({
   url:'pages/message/message?name=zs&age=20'
 })
}
// 跳转到非tab页面
goMessage(){
 wx.navigateTo({
   url:'pages/info/info?name=zs&age=20'
 })
}
// 后退一个页面
goToBack(){
 wx.navigateBack()
}

通过声明式导航传参或编程式导航传参所携带的参数，可以直接在 onLoad 事件中直接获取到

通过onLoad接收参数

javascript 复制代码

onLoad:function(options){
  console.log(options)
}

页面事件

下拉刷新事件

javascript 复制代码

onPullDownRefresh:function(){
  console.log("自动监听，触发了当前页面的下拉刷新");
  
  // 当数据重置成功之后，调用此函数，关闭下拉刷新的效果
  wx.stopPullDownRefresh();
}

上拉加载事件

javascript 复制代码

// 结合节流优化频繁上拉的性能
onReachBottom:function(){
  console.log("触发了当前页面的上拉加载");
}

内部状态

在index.js文件中使用data属性配置内部状态

css 复制代码

Page({
  data: {
    count: 0
  }
})

在index.wxml文件中通过{{}}语法绑定内部状态

arduino 复制代码

<text>{{count}}</text>

{{}}语法既可以绑定内容，也可以绑定属性、算术运算、三木运算等

事件绑定

小程序中常用的几类事件包括tab、input、change

tap：手指触摸后立即离开，类似于click事件

javascript 复制代码

// 绑定事件(无参数)
<button bindtap="handleBindTap"> 按钮 </button>
// 创建事件
page({
   handleBindTap(e) {
     this.setData({
       count:this.data.count+1
     })
     console.log(e) // 事件对象
   },
})
// 绑定事件，传递参数
<button bindtap="handleBindTap" data-info="{{10}}"> 按钮 </button>
// 接收参数
page({
   handleBindTap(e) {
     this.setData({
       count:e.target.dataset.info
     })
   },
})

input：文本框输入事件

javascript 复制代码

// 绑定事件
<input bindinput="handleBindInput"></input>
// 创建事件
page({
   handleBindInput(e) {
     console.log(e.detail.value) // input框目前的最新值
   },
})

change：状态改变时触发

条件渲染

wx:if控制单个标签显示和隐藏

sql 复制代码

<view wx:if="{{type === 1}}">xxx</view>
<view wx:elif="{{type === 2}}">yyy</view>
<view wx:else>000</view>

wx:if控制多个标签的显示和隐藏

xml 复制代码

<block wx:if="{{type === 1}}">
  <view>xxx</view>
  <view>yyy</view>
</block>

<block>只是一个包裹容器，不会渲染为一个标签

hidden="{{}}"控制单个标签的显示和隐藏

ini 复制代码

<view hidden="{{type === 1}}">条件为真隐藏，条件为假显示</view>

wx:if通过动态创建和移除元素来控制元素的显示和隐藏；hidden通过给元素添加移除display:none/block属性实现元素显示和隐藏

列表渲染

ini 复制代码

<view wx:for="{{[1,2,3]}}" wx:key="id">
  索引：{{index}}，元素：{{item}}
</view>

wxss样式渲染

rpx

rpx 的实现原理：由于设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕在宽度上等分为 750 份 (即: 当前屏幕的总宽度为 750rpx) 。

在较小的设备上，1rpx 所代表的宽度较小
在较大的设备上，1rpx 所代表的宽度较大

小程序在不同设备上运行的时候，会自动把rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。

@import导入样式

scss 复制代码

@import "common.wxss";

全局配置

window

通过window对象可以对小程序的导航栏、背景进行全局配置

导航栏
- navigationBarTitleText：导航栏标题文字
- navigationBarBackgroundColor：导航栏背景颜色
- navigationBarTextStyle：导航栏标题颜色，black/white
窗口
- backgroundColor：窗口背景色
- backgroundTextStyle：下拉loading样式，black/white
- enablePullDownRefresh：是否开启全局下拉更新
- onReachBottomDistance：页面上拉触底事件触发时距离页面底部距离，单位px

tabBar

用于实现多页面的快速切换，小程序中的tabBar分为底部和顶部tab。

backgroundColor: tabBar 的背景色
selectedlconPath: 选中时的图片路径
borderStyle: tabBar 上边框的颜色
iconPath: 未选中时的图片路径
selectedColor: tab 上的文字选中时的颜色
color: tab 上文字的默认 (未选中) 颜色
pagePath：页面路径
text：文本内容

css 复制代码

tabBar:{
  "list":[{
    "pagePath":"pages/list/list",
    "text":"列表页"
  }]
}

网络请求

php 复制代码

wx.request({
  url:"",
  method:"GET", // 支持GET、POST等
  data:{},
  success:()=>{}
})