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

小灰灰 2021-09-17 17:42 297阅读 0赞

![标题图][1240]

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

## 开放能力 ##

`open-data`  
用于展示微信开放的数据

type 开放数据类型
    open-gid 当 type="groupName" 时生效, 群id
    lang 当 type="user*" 时生效，以哪种语言展示 userInfo

![效果][1240 1]

<open-data type="groupName" open-gid="xxxxxx"></open-data>
    <open-data type="userAvatarUrl"></open-data>
    <open-data type="userGender" lang="zh_CN"></open-data>

`web-view`  
`web-view` 组件是一个可以用来承载网页的容器.

src webview 指向网页的链接

![效果][1240 2]

案例:

<web-view src="https://mp.weixin.qq.com/"></web-view>

![效果][1240 3]

`onShareAppMessage`

案例:

Page({
      onShareAppMessage(options) {
        console.log(options.webViewUrl)
      }
    })

![效果][1240 4]

`ad`广告

> 目前暂时以邀请制开放申请，请留意后续模板消息的通知

`official-account`  
用户扫码打开小程序,在小程序内配置公众号关注组件,快捷关注公众号.

使用前要前往小程序后台,在“设置”->“接口设置”->“公众号关注组件”中设置.

示例代码：

<official-account></official-account>

原生组件

camera
    canvas
    input
    live-player
    live-pusher
    map
    textarea
    video
    
    // cover-view 与 cover-image

## 添加了无障碍访问 ##

![效果][1240 5]

// 无障碍的属性
    button
    input
    textarea
    checkbox
    switch
    radio
    slider
    picker-view
    scroll-view
    progress
    navigator
    image
    icon
    view
    cover-view
    cover-image
    map

## `javascript`语言 ##

> 事件

事件是视图层到逻辑层的通信方式.事件分冒泡事件和非冒泡事件,冒泡事件是当一个组件上的事件被触发后,会向父节点传递,非冒泡事件是不会向父节点传递的.

<view id="tapTest" data-hi="WeChat" bindtap="tapName">Click me!</view>
    
    target是触发事件的源组件
    currentTarget是事件绑定的当前组件
    
    bindtap, catchtouchstart
    bind事件绑定不会阻止冒泡事件 向上冒泡
    catch事件绑定可以阻止冒泡事件冒泡事件 向上冒泡
    
    // 事件对象可以携带额外信息，如 id, dataset, touches
    
    Page({
      tapName(event) {
        console.log(event)
      }
    })
    
    changedTouches
    detail 自定义事件所携带的数据

touchstart 手指触摸动作开始
    touchmove 手指触摸后移动
    touchcancel 手指触摸动作被打断
    touchend 手指触摸动作结束
    tap 手指触摸后马上离开

![效果][1240 6]

<view id="outer" bindtap="handleTap1">
      outer view
      <view id="middle" catchtap="handleTap2">
        middle view
        <view id="inner" bindtap="handleTap3">inner view</view>
      </view>
    </view>

![效果][1240 7]

<view
      id="outer"
      bind:touchstart="handleTap1"
      capture-bind:touchstart="handleTap2"
    >
      outer view
      <view
        id="inner"
        bind:touchstart="handleTap3"
        capture-bind:touchstart="handleTap4"
      >
        inner view
      </view>
    </view>

![效果][1240 8]

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap">
      DataSet Test
    </view>
    
    Page({
      bindViewTap(event) {
        event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
        event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
      }
    })

事件:  
`target`是触发事件的源组件,`currentTarget`是事件绑定的当前组件.`key`以`bind`或`catch`开头,常见:`bindtap`,`catchtouchstart`.`bind`事件绑定不会阻止冒泡事件向上冒泡,`catch`事件绑定可以阻止冒泡事件向上冒泡.

type: 事件类型
    timeStamp: 事件生成时的时间截
    target: 触发事件的组件的一些属性值集合
    currentTarget: 当前组件的一些属性值集合
    TouchEvent:
    touches:当前停留在屏幕中的触摸点信息
    changedTouches:当前变化的触摸点信息

> 三元操作符

let arr = x > 20 ? "dashu" : "dashucoding"

> 操作符

if(var !== null || var !== undefined || var !== ""){
    }

<wxs module="util">
      var sub = function(val) {
        return val.substring(0, 10)
      }
      var sub1 = function(val) {
        return val.substring(0, 7)
      }
      module.exports.sub1 = sub1;
      module.exports.sub = sub;
    </wxs>
    
    <wxs module="util">
      var sub = function(val) {
        return val.substring(0, 10)
      }
      var subtxst = function(index) {
        if (index == "1") {
          return index = "病假"
        } else {
          return index = "事假"
        }
      }
      module.exports.sub = sub;
      module.exports.subtxst = subtxst;
    </wxs>
    
    {
       {util.subtxst(item.leaveType)}}

`rpx`单位,是根据屏幕宽度进行自适应调整,规定的屏幕宽度为`750rpx`,在官方`iphone6`上的屏幕宽度是`375px`,共有`750`个物理像素.

750rpx=375px=750物理像素
    1rpx=0.5px=1物理像素

> 微信小程序基础

调式功能,在小程序有调式工具:

Console, Sources, Network, Storage, AppData, wxml

小程序调式三大功能区:  
模拟器,调式工具,小程序操作区

模拟器可以对小程序在客户端一些真实的表现,可以呈现出显示状态.小程序中具有自定义编译,可以用来在开发者调式时进入不同的场景.

![效果][1240 9]

有时候上传会有`readme`和`.gitignore`文件不会被打包上传,目的是为了优化大小.

![效果][1240 10]

如果勾了 `ES6` 转 `ES5`或代码压缩,目的是为了优化编译的速度,对于体积过大的文件,工具就会跳过这些文件.

调式工具7大模块:

Wxml、Console、Sources、Network、Appdata、Storage、Sensor、Trace

> 注：`uploadFile` 和 `downloadFile` 暂时不支持在 `Network` `Panel` 中查看

build: 编译小程序
    preview: 预览
    upload: 上传代码
    openVendor: 打开基础库所在目录
    openToolsLog: 打开工具日志目录
    checkProxy(url): 检查指定url

## 自定义数据上报 ##

查看,点击菜单栏中的 “工具 - 自定义分析” .

`Storage`可以用来显示当前项目的`wx.setStorage`或`wx.setStorageSync`后;  
`AppData`可以用于当前项目,显示数据情况;  
`Console`可以用来显示小程序的输出信息;  
`Sources`可以用来显示当前项目的脚本文件;  
`Network`可以用来实现发送的请求和调用文件的信息;  
`Wxml`可以用来查看真实的页面结构和属性.

> 框架

小程序的框架有:

1.  框架全局配置文件
2.  工具类文件
3.  框架页面文件

> 框架全局配置文件

一个小程序框架全局配置文件有:

`app.js`, `app.json`, `app.wxss`, 三个文件组成,全局文件都是在项目的根目录.

// app.js
    App({
    
      /**
       * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
       */
      // 生命周期函数
      onLaunch: function() {
        // 获取小程序更新机制兼容
        if (wx.canIUse('getUpdateManager')) {
          const updateManager = wx.getUpdateManager()
          updateManager.onCheckForUpdate(function(res) {
            // 请求完新版本信息的回调
            if (res.hasUpdate) {
              updateManager.onUpdateReady(function() {
                wx.showModal({
                  title: '更新提示',
                  content: '新版本已经准备好，是否重启应用？',
                  success: function(res) {
                    if (res.confirm) {
                      // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
                      updateManager.applyUpdate()
                    }
                  }
                })
              })
              updateManager.onUpdateFailed(function() {
                // 新的版本下载失败
                wx.showModal({
                  title: '已经有新版本了哟~',
                  content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~',
                })
              })
            }
          })
        } else {
          // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
          wx.showModal({
            title: '提示',
            content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
          })
        }
      },
    
      /**
       * 当小程序启动，或从后台进入前台显示，会触发 onShow
       */
      onShow: function(options) {
    
      },
    
      /**
       * 当小程序从前台进入后台，会触发 onHide
       */
      onHide: function() {
    
      },
    
      /**
       * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
       */
      onError: function(msg) {
    
      }
    })

// 定义全局数据
    globalData: {
     userInfo: null
    }

// app.json ：
    {
      "pages": ["pages/index/index", "pages/logs/index"],
      "window": {
        "navigationBarTitleText": "Demo"
      },
      "tabBar": {
        "list": [
          {
            "pagePath": "pages/index/index",
            "text": "首页"
          },
          {
            "pagePath": "pages/logs/logs",
            "text": "日志"
          }
        ]
      },
      "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
      },
      "debug": true,
      "navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
    }
    
    // 配置页面路径
    // 配置窗口表现
    // 配置标签导航
    // 配置网络超时
    // 配置debug模式

> 页面配置项列表

{
      "navigationBarBackgroundColor": "#ffffff",
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "微信接口功能演示",
      "backgroundColor": "#eeeeee",
      "backgroundTextStyle": "light"
    }
    
    navigationBarBackgroundColor 导航栏背景颜色
    navigationBarTextStyle 导航栏标题颜色
    navigationBarTitleText 导航栏标题文字内容
    navigationStyle 导航栏样式
    backgroundColor 窗口的背景色
    backgroundTextStyle 下拉 loading 的样式，仅支持 dark / light
    enablePullDownRefresh 是否全局开启下拉刷新
    onReachBottomDistance 页面上拉触底事件触发时距页面底部距离
    disableScroll 设置为 true 则页面整体不能上下滚动
    disableSwipeBack 禁止页面右滑手势返回

小程序中有工具类文件: `utils`, 通过`module.exports`进行注册使用.

App({
     onLaunch: function() {
     },
     onShow: function() {
     },
     onHide: function() {
     },
     onError: function() {
     },
     globalData: 'dashucoding'
    })

如果看了觉得不错

点赞！转发！

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

## 结语 ##

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

[1240]: /images/20210724/5b966e7d34d24bb5ae5b0f565930cab0.png
[1240 1]: /images/20210724/1624151b0eb44659b919f516fd867d77.png
[1240 2]: /images/20210724/3c1a41741d2f4c67bffabd70fc1d3524.png
[1240 3]: /images/20210724/190339081f20483f84e561f17a00dc56.png
[1240 4]: /images/20210724/d6570366d38b43f4ab52ccecc06ba147.png
[1240 5]: /images/20210724/ee056d18f46e4340818837f99922dee8.png
[1240 6]: /images/20210724/92cf9445a1764a0c8604fe1c5572f0c5.png
[1240 7]: /images/20210724/3e0288e7d1044f469e350f79bc6f6ca0.png
[1240 8]: /images/20210724/58b2688c5b55404e97586c4e4d9aa0e6.png
[1240 9]: /images/20210724/ac34904d6e3f43859ecce626b86a3779.png
[1240 10]: /images/20210724/aaf50aa14fad4fbeb527607298c8b04f.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1