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

微信小程序视图层

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

// 绑定数据index.wxml
    
      {
   {message}} 
     
      index.jsPage({ data: ({  message: 'Hello' })})
     
    

// 组件属性// data中的数据绑定到微信小程序组件上
    Page({ data: {  id: 0 }})

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

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

    
     {
   {"dashu" + name}}
    Page({ data: {  name: 'coding' }})

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

    
      dashu 
    // 是否进行渲染
    
     view1
    
    
     view2
    
    
     view3
    

    
      {
   {index}} : {
   {item.message}}
    Page({ arr:[{ message: "a", },{  message: "b" }]})// wx:for-item指定数组当前元素的变量名// wx:for-index指定数组当前项目下标的变量名
    
      {
   {ind}} : {
   {itemN.message}}
    一个包含多个节点的结构块block
     
     
       {
   {index}} 
      
     
       {
   {item}} 
     
    

// wx:key指定唯一标识符动态改变或有新列表的加入
    
      {
   {item.id}} 
    Page({ obj: [  {id: 3, con:'con_3'},  {id: 2, con:'con_2'},  {id: 1, con:'con_1'}, ]})

// 定义模板 template// 共用代码,一次编写多次使用
    // wxml// is使用模板
    

// 引用功能import引用目标文件
    index引用item.
    
    // import引用模板// include引用整个文件

    
    
      body 
    
    
    
      header 
    
    
      footer 
    

view 视图容器组件scroll-view 可滚动视图区域swiper 滑块视图容器组件icon 图标组件text 文本组件progress 进度条组件button 按钮组件checkbox 多项选择器radio 单项选择器form 表单组件input 单行输入框textarea 多行输入框label 改进表单可用性picker 滚动选择器slider 滑动选择器switch开关选择器navigator 页面链接组件跳转audio 音频组件image 图片组件video 视频组件// 客服会话按钮组件contact-buttonwx.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 用来异步从本地缓存中移除指定的keywx.removeStorageSync 用来同步从本地缓存中移除指定的keywx.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 显示操作菜单// apiwx.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.showActionSheetwx.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后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通

简书博客： 达叔小生

结语

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