全栈开发工程师微信小程序-中(中)
全栈开发工程师微信小程序-中(中)
开放能力
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
可以用来查看真实的页面结构和属性.
框架
小程序的框架有:
- 框架全局配置文件
- 工具类文件
- 框架页面文件
框架全局配置文件
一个小程序框架全局配置文件有:
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 点赞