微信小程序

原生微信小程序

1 注册账号 appid: （每个账户都有）

2 微信开发者工具

uniapp开发多端应用

uniapp-> 小程序、H5、App..

uniapp: 原生小程序+vue(2,3)

认识小程序

小程序页面的构成-4个文件

.wxml -> 类似.html

.wxss -> 类似.css

.js -> 定义页面的逻辑、监听事件、发送请求

.json -> 定义页面的配置

页面结构

view块级区域 -> div

text行内区域 -> span

页面样式 大部分样式和选择器与css一样，🉑️参考

WXSS | 微信开放文档

逻辑处理

data-> 初始化页面数据

setData-> 更新数据 {{}} -> 渲染数据

bind:事件类型=“回调”

配置

全局配置-app.json

pages:[页面路径,...]

entryPagePath: '小程序默认启动页面'

配置选项

1. pages：用于指定小程序包含的所有页面路径列表，每个页面对应一个.js、.wxml、.wxss和.json文件。页面路径是相对于小程序根目录的路径，例如："pages/index/index"表示根目录下的pages目录中的index页面。"pages": [ "pages/index/index", "pages/logs/logs" ],

"pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],

 2.window：用于指定小程序窗口的样式和配置选项，

例如navigationBarTitleText属性指定导航栏标题文字，

       navigationBarBackgroundColor属性指定导航栏背景颜色，

       backgroundTextStyle属性指定下拉动画的样式等。

       enablePullDownRefresh: true 允许下拉刷新功能。

  disableScroll: 默认不禁止页面滚动。

  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "我的小程序",
    "navigationBarBackgroundColor": "#ffffff",
    "enablePullDownRefresh": true,
    "backgroundTextStyle":"dark"
  },

3.tabBar：

tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：底部tabBar 、顶部tabBar

tabBar的6个组成部分

① backgroundcolor:tabBar的背景色

② selectedlconPath:选中时的图片路径

③ borderStyle:tabBar 上边框的颜色

④ iconPath:未选中时的图片路径

⑤ selectedcolor:tab上的文字选中时的颜色

⑥ color:tab 上文字的默认(未选中)颜色

每一个tab项的配置选项：

pagePath：页面路径，页面必须在 pages 中预先定义

text：tab 上显示的文字

iconPath：未选中时的图标路径;当postion为top时，不显示icon

selectedlconPath：选中时的图标路径;当 postion为top 时，不显示icon

// 和window配置同级
 "tabBar": {
    "list": [{
      "pagePath": "pages/event/event",
      "text": "事件测试"
    },
    {
      "pagePath": "pages/index/index",
      "text": "index"
    }]
  }

• 注意：
  • tabBar中只能配置最少2个、最多5个tab页签
  • 当渲染顶部tabBar时，不显示icon，只显示文本

window: {} // 窗口表现 ，参考全局配置 | 微信开放文档

页面配置

页面.json

绝大多数配置与全局配置一样，有的配置只能在页面配置文件中配置如disableScroll

注意：当页面配置与全局配置冲突的时，根据就近原则，最终的效果以页面配置为准。

页面配置和全局配置的关系

小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现，此时，页面级别的.json配置文件就可以实现这种需求。

小程序样式长度单位-rpx

小程序中满屏等于750rpx,项目设计稿宽度一般为750px,方便前端布局单位换算

组件

视图容器类组件

view 块级元素

普通视图区域、类似于HTML中的div，是一个块级元素、常用来实现页面的布局效果

<view>
<text>{{ message }}</text>
<button bind:tap="onTap">点击我</button>
</view>

 scroll-view:

scroll-y 允许垂直方向 滚动

scroll-x 允许水平方向 滚动

refresher-enabled 开启下拉刷新

可滚动的视图区域，常用来实现滚动列表效果

swiper和swiper-item

轮播图容器组件和轮播图item组件

关于swiper组件的常用属性:

1 indicator-dots：是否显示面板指示点  

默认值false

2 indicator-color：指示点颜色

3 indicator-active-color：当前选中的指示点颜色

4 autoplay：是否自动切换

5 interval：自动切换时间间隔

6 circular：是否采用衔接滑动

text 

文本组件，类似HTML中的span标签，是一个行内元素

button

button： 按钮组件，功能比HTML中的button按钮丰富， 通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等等）

image

图片组件， image组件默认宽度约 300px、高度约240px 例如：<image src="图片路径" mode="图片填充模式"/>， image组件的mode属性用来指定图片的裁剪和缩放模式，常用的mode属性值如下

s

aspectFit: 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来

aspectFill: 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

widthFix: 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

heightFix: 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
一般项目中根据设计稿设置imàge宽高，当图片宽高和占位容器不一致，建议mode="aspectFill"

navaigator 

navaigator <navaigator url="/pages/index/index" hover-class"link-hover'

open-type="switchTab">跳到首页</navigator>

url-支持相对或绝对路径

hover-class 点击导航样式

跳转到tab页面需要增加open-type="switchTab"

常用表单组件

 button

  <button>为按钮组件，是常用的表单组件之一，用于事件的触发以及表单的提交。

<view class="demo-box">
  <view class="title">7.button小案例</view>
  <view class="title">(1)迷你按钮</view>
  <button size="mini" type="primary">主要按钮</button>
  <button size="mini" type="default">次要按钮</button>
  <button size="mini" type="warn">警告按钮</button>
  <view class="title">(2)按钮状态</view>
  <button>普通按钮</button>
  <button disabled>警用按钮</button>
  <button loading>加载按钮</button>
  <view class="title">(3)增加按钮事件</view>
  <button bindgetuserinfo="getUserDetail" open-type="getUserInfo">点我获取用户信息</button>
</view>

checkbox

  <checkbox>为复选框组件，常用于在表单中进行多项数据的选择。复选框的<checkbox-group>为父控件，其内部嵌套若干个<checkbox>子控件

 <checkbox-group>属性如下:

属性：bindchange

类型：EventHandle

checkbox-group中选中项发生改变时触发change 事件，detail ={value:[选中的checkbox的value的数组]}

<checkbox>组件的属性如下：

属性

value：checkbox标识，选中时触发checkbox-group的 change 事件，并携带checkbox 的value

checked：当前是否选中，可用来设置默认选中

代码示例：

.wxml

<view class="demo-box">
  <view class="title">8.checkbox小案例</view>
  <view class="title">利用for循环批量生成</view>
  <checkbox-group bindchange="checkboxChange">
    <label wx:for="{{items}}">
      <checkbox value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}
    </label>
  </checkbox-group>
</view>

checkbox.js 

Page({
  data: {
    items: [
      { name: "tiger", value: "老虎" },
      { name: "elephant", value: "大象" },
      { name: "lion", value: "狮子", checked: "true" },
      { name: "penguin", value: "企鹅" },
      { name: "elk", value: "麋鹿" },
      { name: "swan", value: "天鹅" },
    ]
  },
  checkboxChange:function(e) {
    console.log("checkbox发生change事件，携带value值为：", e.detail.value)
  }
})

 input

  <input>为输入框组件，常用于文本(如姓名、年龄等信息)的输入。属性表如下：

 属性：

type:input的类型

placehoder:输入框为空时的占位符

label
  <label>是标签组件，不会呈现任何效果，但是可以用来改进表单组件的可用性。当用户在label元素内点击文本时，就会触发此控件，即当用户选择该标签时，事件会传递到和标签相关的表单控件上，可以使用for属性绑定id,也可以将空间放在该标签内部，该组件对应属性如下所示

for:绑定控件的id

<view class="demo-box">
  <view class="title">10.lable小案例</view>
  <view class="title">(1)利用for属性</view>
  <checkbox-group>
    <checkbox id="tiger" checked />
    <label for="tiger">老虎</label>
    <checkbox id="elephant" />
    <label for="elephant">大象</label>
    <checkbox id="lion" />
    <label for="lion">狮子</label>
  </checkbox-group>
  <view class="title">(2)label包裹组件</view>
  <checkbox-group>
    <label>
      <checkbox checked />老虎
    </label>
    <label>
      <checkbox/>大象
    </label>
    <label>
      <checkbox/>狮子
    </label>
  </checkbox-group>
</view>

form

  <form>为表单控件组件，用于提交表单组件中的内容。<form>控件组件内部可以嵌套多种组件。

 

.wxml

<view class="demo-box">
  <view class="title">11.form小案例</view>
  <view class="title">模拟注册功能</view>
  <form bindsubmit="onSubmit" bindreset="onReset">
    <text>用户名:</text>
    <input name="username" type="text" placeholder="请输入你的用户名"></input>
    <text>密码:</text>
    <input name="password" type="password" placeholder="请输入你的密码"></input>
    <text>手机号:</text>
    <input name="phonenumber" type="password" placeholder="请输入你的手机号"></input>
    <text>验证码:</text>
    <input name="code" type="password" placeholder="请输入验证码"></input>
    <button form-type="submit">注册</button>
    <button form-type="reset">重置</button>
  </form>
</view>

.js

Page({
  onSubmit(e) {
    console.log("form发生了submit事件，携带数据为：")
    console.log(e.detail.value)
  },
  onReset() {
    console.log("form发生了reset事件，表单已被重置")
  }
})

 radio

  <radio>为单选框组件，往往需配合<radio-group>组件来使用，<radio>标签嵌套在<radio-group>当中。

  <radio-group>组件属性如下：

 <radio>组件属性如下：

 

 .wxml

<view class="demo-box">
  <view class="title">14.radio小案例</view>
  <view class="title">利用for循环批量生成</view>
  <radio-group bindchange="radioChange">
    <block wx:for="{{radioItems}}">
      <radio value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}
    </block>
  </radio-group>
</view>

.js

Page({
  data: {
    radioItems: [
      { name: 'tiger', value: '老虎' },
      { name: 'elephant', value: '大象' },
      { name: 'lion', value: '狮子', checked: 'true' },
      { name: 'penguin', value: '企鹅' },
      { name: 'elk', value: '麋鹿' },
      { name: 'swan', value: '天鹅' },
    ]
  },
  radioChange:function(e) {
    console.log("radio发生change事件，携带value值为：", e.detail.value)
  }
})

修改项目首页

只需要调整 app.json ->pages 数组中页面路径的前后顺序，即可修改项目的首页。小程序会把排在第一位的页面，当作项目首页进行渲染

WXML（WeiXin Markup Language）

什么是 WXML

WXML(WeiXin Markup Language)是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的 HTML。

WXML和 HTML 的区别

① 标签名称不同
HTML(div, span, img, a)
WXML(view,text,image, navigator)

② 属性节点不同
<a href="#">超链接</a>
<navigator url="/pages/home/home"></navigator>提供了类似于 Vue 中的模板语法

③提供了类似于 Vue 中的模板语法
    数据绑定
    列表渲染
    条件渲染

WXSS样式

WXSS 和 CSS 的区别

① 新增了 rpx 尺寸单位
CSS 中需要手动进行像素单位换算，例如rem
WXSS 在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算

②提供了全局的样式和局部样式因
项目根目录中的 app.wxss 会作用于所有小程序页面
局部页面的 .wxss 样式仅对当前页面生效

③ WXSS 仅支持部分 CSS 选择器

事件绑定

小程序中常用的事件

bindtap 的语法格式

在小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过 tap 事件来响应用户的触摸行为。

通过 bindtap，可以为组件绑定 tap 触摸事件，语法如下

在vxml

<view>
  {{ msg }}
  <button bind:tap="changeMsg" size="mini" type="primary">修改msg</button>
</view>

在index.js 文件中定义对应的事件处理函数

Page({
   // 定义数据
   data: {
    msg: '这是我第一个微信小程序'
})

数据绑定

1. 数据绑定的基本原则

在 data 中定义数据

在 WXML 中使用数据

2. 在 data 中定义页面的数据

在页面对应的 .js 文件中，把数据定义到 data 对象中即可：

Page({

  
  data: {
    category: [],
    filePath: 'https://img0.baidu.com/it/u=2179487651,2777141936&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=305'
  }

条件渲染

wx:if

在小程序中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块

也可以用wx:else 来添加 else 判断 

<view wx:if="{{ isLogin }}">
  欢迎您访问系统
</view>
<view wx:else>
  请登录
</view>

列表渲染

wx:for

通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构

       item 默认值  ->  每一项
       index 默认值  ->  索引

在index.wxml

<view>
  <view>
    <text>序号</text>
    <text>名称</text>
    <text>价格</text>
  </view>
  <!--
    wx:for重复渲染组件内容
       item 默认值  ->  每一项
       index 默认值  ->  索引
    wx:key="id"  每一项是对象，直接写属性名，每一项是简单类型 直接写*this   
    wx:for-item="good" 自定义访问数组单元的变量名   
    wx:for-index="idx"  自定义访问数组索引的 变量名
  -->
  <view wx:for="{{goodsList}}"  wx:key="id" wx:for-item="good" wx:for-index="idx">
    <text>{{ idx + 1}}</text>
    <text>{{  good.name }}</text>
    <text>{{good.price}}</text>
  </view>
</view>

在index.js

    goodsList: [
      {
        id:  1,
        name: 'TCL电视',
        price: 3000
      },
      {
        id:  2,
        name: '小米汽车',
        price: 3000000
      },
      {
        id:  3,
        name: '华为P60',
        price: 5000
      }
    ]
  }

hidden

在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的显示与隐藏

wx:if 与 hidden 的对比 

运行方式不同

 wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏  
hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏

使用建议  

频繁切换时，建议使用 hidden  
控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

网络数据请求

发起 GET 请求

调用微信小程序提供的 wx.request() 方法，可以发起 GET 数据请求

//发起GET请求
getInfo(){
  wx.request({
    url: 'https://XXX',//所要请求的接口地址
    method:'GET',//请求的方式
    data:{
      name:'XX',
      age:20
    },
    //请求成功的回调函数
    success:(res)=>{
      console.log(res)//打印服务器返回的对象
    },
    //请求失败的回调函数
    fail:(res)=>{
      console.log('请求数据失败！')
    },
    //无论请求成功与否都会执行的函数
    complete:(res)=>{
      console.log('已经发送网络数据请求！')
    }
  })
 
},

发起 POST 请求

调用微信小程序提供的 wx.request() 方法，可以发起 POST 数据请求

//发起POST请求
getInfo(){
  wx.request({
    url: 'https://XXX',//所要请求的接口地址
    method:'POST',//请求的方式
   data:JSON.stringify({
       "sbr": "gy",
        "fcqk": "2"    
     }),
     header:{'content-type': 'application/json'},
    //请求成功的回调函数
    success:(res)=>{
      console.log(res)//打印服务器返回的对象
    },
    //请求失败的回调函数
    fail:(res)=>{
      console.log('请求数据失败！')
    },
    //无论请求成功与否都会执行的函数
    complete:(res)=>{
      console.log('已经发送网络数据请求！')
    }
  })
 
},

参数

url参数为请求的地址

method参数为请求方法

data参数为请求参数

success为请求成功的回调

fail为请求失败的回调。

小程序中生命周期的分类

应用生命周期

小程序的生命周期函数是在app.js中调用，通过App(Object)函数用来注册一个小程序，指定其小程序的生命周期回调

onLanch: 小程序初始化完成时触发，全局只触发一次

onShow: 小程序启动，或从后台进入前台时触发

onHide: 小程序从前台进入后台时触发（如底部tab栏切换到其他页面）

onEerror：小程序发生错误或者API调用报错时触发

onPageNotFound: 小程序要打开的页面不存在时触发

onUnhandleRejection：小程序有未处理的Promise拒绝时触发

onThemeChange：系统切换主题时触发

页面生命周期

onLoad: 监听页面加载（只会调用一次，可获取当前页面路径的参数，相当于view中的created）

onShow: 监听页面显示（发送请求获取数据）

onReady：监听页面初次渲染完成（获取页面元素，相当于view中的mounted)

onHide：监听页面隐藏（如底部tab栏切换到其他页面或小程序切入后台等触发）

onUnload：监听页面卸载（如redirectTo或navigateBack到其他页面时触发）

组件生命周期

created：监听页面加载

attached：监听页面显示（这个生命周期用的多，绝大多数初始化工作可以在这里进行）

ready：监听页面初次渲染完成

moved：监听页面隐藏

detached：监听页面卸载

error：每当组件方法抛出错误时间

showToast：消息提示框

showModal：模态对话框

showLoading：加载框

showDialog：展示弹框

showActionSheet(Object object)：显示操作菜单

handleReachBottom：滚动到底部

onPullRefresh：下拉刷新