全栈开发工程师微信小程序-中(下)

全栈开发工程师微信小程序-中(下)

微信小程序视图层

wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元.

// 绑定数据
index.wxml
<view> {{message}} <view>

index.js
Page({
 data: ({
  message: 'Hello'
 })
})

// 组件属性
// data中的数据绑定到微信小程序组件上
<view id="item-{{id}}"></view>

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

<view wx:if="{{con}}"></view>

Page({
 data: {
  con: true
 }
})

<checkbox checked="{{false}}"></checkbox>

<view hidden="{{flag ? true : false}}">hello</view>

<view>{{a+b}}+{{c}}+d</view>

Page({
 data: {
  a: 1,
  b: 2,
  c: 3
 }
})

3+3+d

<view wx:if="{{len > 5}}"></view>

<view>{{"dashu" + name}}</view>

Page({
 data: {
  name: 'coding'
 }
})

<view>{{object.key}} {{array[0]}}</view>

Page({
 object: {
  key: "dashucoding"
 },
 array: ['dashu']
})

<view wx:if="{{con}}"> dashu </view>
// 是否进行渲染
<view wx:if="{{len > 4}}">view1</view>
<view wx:elif="{{len > 3}}">view2</view>
<view wx:else>view3</view>

<view wx:for="{{arr}}">
 {{index}} : {{item.message}}
</view>

Page({
 arr:[{
 message: "a",
 },{
  message: "b"
 }]
})

// wx:for-item指定数组当前元素的变量名
// wx:for-index指定数组当前项目下标的变量名

<view wx:for="{{arr}}" wx:for-index="ind" wx:for-item="itemN">
 {{ind}} : {{itemN.message}}
</view>

一个包含多个节点的结构块block

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

// wx:key指定唯一标识符
动态改变或有新列表的加入

<switch wx:for="{{obj}}" wx:key="con" style="display: block;"> {{item.id}} </switch>

Page({
 obj: [
  {id: 3, con:'con_3'},
  {id: 2, con:'con_2'},
  {id: 1, con:'con_1'},
 ]
})

// 定义模板 template
// 共用代码,一次编写多次使用
<template name="item">
 <view>
  <text>{{index}} : {{time}}</view>
 </view>
</template>

// wxml
// is使用模板
<template is="item" data="{{item}}">

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

<template name="old">
 <view> old </view>
<template>
<template name="new">
 <view> new </view>
</template>

<block wx:for="{{[2,3,4,5]}}">
 <template is="{{item == 2 ? 'old' : 'new'}}"/>
</block>

// 引用功能
import引用目标文件
<template name="item">
 <text>{{text}}</text>
</template>

index引用item.
<import src="item.wxml"/>
<template is="item" data="{{text: 'name'}}"/>

// import引用模板
// include引用整个文件

<include src="header.wxml"/>
<view> body </view>
<include src="foot.wxml"/>

<view> header </view>

<view> footer </view>

view 视图容器组件
scroll-view 可滚动视图区域
swiper 滑块视图容器组件
icon 图标组件
text 文本组件
progress 进度条组件
button 按钮组件
checkbox 多项选择器
radio 单项选择器
form 表单组件
input 单行输入框
textarea 多行输入框
label 改进表单可用性
picker 滚动选择器
slider 滑动选择器
switch开关选择器
navigator 页面链接组件跳转
audio 音频组件
image 图片组件
video 视频组件

// 客服会话按钮组件
contact-button
wx.request 用来请求服务器的
w.downloadFile 文件上传与下载
WebSocket 会话用来创建一个会话连接
wx.chooseImage 选择图片
wx.previewImage 预览图片
wx.getImageInfo 获取图片信息
wx.saveFile 保存文件到本地
wx.getSavedFileList 获取本地文件列表
wx.getSavedFileInfp 获取本地文件信息
wx.removeSavedFile 删除本地文件
wx.openDocument 打开文档

// 数据缓存
wx.setStorage 异步方式将数据存储在本地缓存
wx.setStorageSync 同步方式将数据存储到本地缓存指定的key中

// 本地缓存数据
wx.getStorage, wx.getStorageSync, wx.getStorageInfo, wx.getStorageInfoSync

// 清除数据
wx.removeStorage 用来异步从本地缓存中移除指定的key
wx.removeStorageSync 用来同步从本地缓存中移除指定的key
wx.clearStorage() 异步清理
wx.clearStorageSync() 同步清理

// 位置信息
wx.getLocation, wx.chooseLocation, wx.openLocation, wx.createMapContext.

wx.getLocation() 可以获取当前位置信息
wx.chooseLocation() 打开地图选择位置
wx.openLocation() 微信内置地图查看位置

// 获取设备
wx.getSystemInfo 用来获取异步获取设备的系统信息
wx.getSystemInfoSync 用于同步获取系统信息
wx.getNetworkType 用来获取网络类型
wx.onAccelerometerChange 用来进行重力感应
wx.onCompassChange 用来监听罗盘数据
wx.makePhoneCall 用来拨打电话
wx.scanCode 用来调出客户端扫码界面

// 交互反馈
wx.showToast 用来显示消息提示框
wx.hideToast 隐藏消息提示框
wx.showModal 显示模态弹窗
wx.showActionSheet 显示操作菜单

// api
wx.login 获取登录凭证
wx.checkSession 检查登录状态是否过期
wx.getUserInfo 获取用户信息

onShareAppMessage

// 用来设置页面的分享信息
Page({
 onShareAppMessage: function(){
  return {
   title: '自定义标题',
   desc: '描述',
   path: 'page/user?id=123'
  }
 }
})

// 微信支付
微信支付5个步骤:
小程序内调用登录接口
商户系统调用支付统一下单
商户系统调用再次签名
商户系统接收收支通知
系统查询支付

微信支付用户->微信小程序->商户系统->微信后台

// 获取用户信息
Page({
 onLoad: function(){
  wx.getUserInfo({
   success: function(res){
    console.log(res);
    var userInfo=res.userInfo
    var nickName=userInfo.nickName
   }
  })
 }
})

// 校验登录状态是否过期
wx.checkSession({
 success: function(){
 },
 fail: function(){
  wx.login()
  // 登录态过期
 }
})

App({
 onLaunch: function(){
  wx.login({
   success: function(res) {
    if(res.code){
     wx.request({
      url: '',
      data: {
       code: res.code
      }
     })
    }else{
     console.log(res.errMsg)
    }
   }
  })
 }
})

// 操作菜单
// wx.showActionSheet
wx.showActionSheet({
  itemList: ['A', 'B', 'C'],
  success(res) {
    console.log(res.tapIndex)
  },
  fail(res) {
    console.log(res.errMsg)
  }
})

// wx.showModal
// 显示模态对话框
wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success(res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

// wx.showToast
// 显示消息提示框
wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

setTimeout(function(){
 wx.hideToast
},2000)

// wx.scanCode
调起客户端扫码界面进行扫码
// 允许从相机和相册扫码
wx.scanCode({
  success(res) {
    console.log(res)
  }
})

// 只允许从相机扫码
wx.scanCode({
  onlyFromCamera: true,
  success(res) {
    console.log(res)
  }
})

// wx.makePhoneCall
// 拨打电话
wx.makePhoneCall({
  phoneNumber: '1340000' // 仅为示例，并非真实的电话号码
})

如果看了觉得不错

点赞！转发！

达叔小生：往后余生，唯独有你
You and me, we are family !
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客： 达叔小生
https://www.jianshu.com/u/c785ece603d1

结语

• 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
• 小礼物走一走 or 点赞