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

超、凢脫俗 2021-09-17 18:24 343阅读 0赞

![标题图][1240]

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

> 微信小程序视图层

`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
     }
    })

<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>{
       {"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
     }
    })

// 引用功能
    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][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

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

[1240]: /images/20210724/bec4c9fe58e44a11ab9a8f7aa5abbe6f.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1