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

开放能力

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

type 开放数据类型open-gid 当 type="groupName" 时生效, 群idlang 当 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>

原生组件

cameracanvasinputlive-playerlive-pushermaptextareavideo// cover-view 与 cover-image

添加了无障碍访问

// 无障碍的属性buttoninputtextareacheckboxswitchradiosliderpicker-viewscroll-viewprogressnavigatorimageiconviewcover-viewcover-imagemap

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, catchtouchstartbind事件绑定不会阻止冒泡事件 向上冒泡catch事件绑定可以阻止冒泡事件冒泡事件 向上冒泡// 事件对象可以携带额外信息，如 id, dataset, touchesPage({ tapName(event) { console.log(event) }})changedTouchesdetail 自定义事件所携带的数据

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.jsApp({ /** * 当小程序初始化完成时，会触发 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 / lightenablePullDownRefresh 是否全局开启下拉刷新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 点赞