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

开放能力

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

原文地址：https://www.cnblogs.com/dashucoding/p/10265075.html

时间： 2024-10-06 23:45:56

全栈开发工程师微信小程序-中(中)的相关文章

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

微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> {{message}} <view> index.js Page({ data: ({ message: 'Hello' }) }) // 组件属性 // data中的数据绑定到微信小程序组件上 <view id="item-{{id}}"></view> Page({ data: {

全栈之路-微信小程序-SKU开发（代码）

SKU开发是小程序中最难的一部分,思路在分析中已经记录过了,这里主要看一下代码的实现,感觉老师写的代码太棒了,很优雅!主要想记录一下写代码的思路,对面向对象编程的实践. 一.代码结构的分析 1.说明几个关键词 搞清楚sku的概念,搞清楚我们抽象出来的realm组件.fence组件.cell组件以及他们对应的模型类,这里模型类放到models文件夹中 realm组件 --- fence-group.js中的FenceGroup模型 fence组件 --- fence.js中的Fence模型 cel

全网首发mpvue课程小程序全栈开发视频课程 小程序实战教程 完整版

第1章 课程简介本章节介绍了课程概述,教学方式 ,还有小程序项目的演示. 第2章 原生小程序对原生小程序做一个入门的介绍,包括小程序帐号申请和开发工具安装和使用,小程序目录文件的讲解,再简单把小程序原生的组件和API过一下. 第3章 使用vuejs开发小程序本章节用一个todolist案例,带着vuejs入门,再用mpvue的方式重写这个案例,为实战项目开发打好基础. 第4章 koa2入门本章节讲解 koa2入门相关的基础知识点,为实战项目的服务器开发部分做准备,其中包括,使用koa2开发web

不做全栈开发工程师

最近老是听到一个词:全栈开发工程师,英文是:Full Stack Developer.仔细分析,所谓的全栈开发工程师或许也分为两种:一种是做小公司小网站,一个人全包,什么都做,自然什么都会:另一种是大公司大网站,需要整体架构设计师,分工明细,很多人做,但需要人统筹.显然这是两种境界,初级水平是无一精通:高级是无一不精. 在十几二十年前,一个人一台电脑,搞定一个软件,一个网站.那个时候没有那么多细分,也就是客户端-服务器,或者浏览器端-服务器端,最多加上一个数据库端.我有一位老领导,一直沉浸在二十

全栈开发工程师，就是个神话~

原文地址 这篇文章很有道理,如果放在十几年以前,说全栈工程师,还可以,那时的 Web 站点的访问量不是很大,大都是一台 Web 服务器和一台数据库服务器,采用分离的结构,更有甚者,Web 服务器和数据库服务器是同一台服务器,一个工程师,就可以完成所有的工作,包括,用 Oracle 或 MySQL 建立数据库,编写 Web 的前端和后端,前端包括 HTML,CSS,JavaScript,后端则可采用 Java,PHP,.NET,更有用 Lisp 的.现在的大网站,都是由当初的小网站起步的,即便是

老男孩Python高级全栈开发工程师【真正的全套完整无加密】

课程大纲 老男孩python全栈,Python 全栈,Python教程,Django教程,Python爬虫, scrapy教程,python高级全栈开发工程师,本套教程,4部分完整无缺,课程完结,官方售价6800元. 课程全部都是不加密,全部都有声音-不是网上那种几块钱十几块钱那种加密没有声音或者课程不全,贪便宜花冤枉钱不说都会严重影响学习,耽误大量时间! 本套全栈课程,不说完全媲美线下教学,只要你肯坚持,不会比面授差太多-坚持学完找一份python开发类的工作完全没问题,另外对于学习方面的投资

PYTHON高级全栈开发工程师-老男孩教育

PYTHON高级全栈开发工程师 最近开班日期:2016年4月17号                               课程周期:4至4.5个月 学习方式:全脱产面授学习(周一至周五,早9:30-晚9:00) 课程收费:RMB15800 适用人群:应届专科.本科毕业生及其它对从事编程开发感兴趣的人群 学员年龄:18-30岁之间 平均就业工资:8-12K 课程咨询QQ:41117397  70271111  80042789  41117483      技术讨论群:         Py

web全栈开发工程师的趋势、价值

随着技术的发展.用户量的增加.客户端种类变多,每一个小小的细节都需要优化和考虑.在海量的访问量面前,也许改变一个按钮的位置和颜色就能影响上千万次的用户体验.如今的互联网产品已不是以一己之力就可以完成的乐高积木了,Web开发需要以某种可控的方式来管理.于是,所有认真对待互联网产品的大公司都引入了流水线开发流程,在这条流水线上诞生了多个非常专业的职位. 1. 岗位需要"T"型人才 要求你不仅"一样精"更要在"一样精"的基础上"百样通&quo

发现自己就是个全栈开发工程师

回头看来,发现自己干过不少的事.不过目前专注于机器学习,深度学习方面,发现这才是自己的兴趣所在,如无意外,将长期专注于这方面. 机器学习,深度学习相关经历: 1 玩过基于HOG特征的行人检测,分别在JAVA,OPENCV,CUDA做个实验: 2 玩过TLD,研究过C++版本的源代码: 3 用C++实现过卷积神经网络的基础框架,含CPU版本和GPU版本(cuda实现): 4 研究过caffe卷积神经网络的源代码: 5 在coursera上过andrew ng的机器学习的课程: WEB开发经历: 1