zoukankan      html  css  js  c++  java

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

    标题图

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

    开放能力

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

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

    效果

    <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 指向网页的链接

    效果

    案例:

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

    效果

    <script
  type="text/javascript"
  src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"
></script>

    onShareAppMessage

    案例:

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

    效果

    ad广告

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

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

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

    示例代码：

    <official-account></official-account>

    原生组件

    camera
canvas
input
live-player
live-pusher
map
textarea
video

// cover-view 与 cover-image

    添加了无障碍访问

    效果

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

    javascript语言

    var arr = "dashucoding";
var arr = 10;
var arr = true;
var arr = [2,"dashu",23];
var arr = {name:"dashu"};

var name = "dashu";
if(name === "dashu"){
 this.alert("dashucoding");
}else{
 this.alert("dashu");
}
// this代表当前的页面对象

    事件

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

    <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 手指触摸后马上离开

    效果

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

    效果

    <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>

    效果

    <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

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

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

    效果

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

    效果

    如果勾了 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

    结语

    • 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
    • 小礼物走一走 or 点赞
  • 相关阅读:
    Java 泛型 泛型的约束与局限性
    Java 泛型 泛型方法
    Java 泛型 泛型数组
    Java 泛型 协变性、逆变性
    Java 泛型 协变式覆盖和泛型重载
    Java 泛型 泛型代码和虚拟机
    Insertion Sort List
    Remove Duplicates from Sorted List II
    String to Integer (atoi)
    SpringMvc源码入门
  • 原文地址：https://www.cnblogs.com/dashucoding/p/10265075.html
Copyright © 2011-2022 走看看