同步操作将从 Jeskson/Wechat_small_program_Share 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
微信小程序分享🙈
对于微信小程序的注册和普通软件的使用,不做说明(开发文档有简易教程,带你走进微信小程序开发大门),这里只是记录下微信小程序中的代码使用(API的调用),瞄准官方开发文档一步一步的学会使用,并掌握微信小程序。
1:官方工具:
2:简易教程:
3:设计指南:
4:运营规范:
5:接入指南:
6:支付文档:
7:客服消息:
9:数据分析:
在微信小程序中有app.js,app.json,app.wxss分别是脚本文件,配置文件,样式文件。在脚本文件中我们能监听并处理小程序的生命周期函数,声明全局变量。在学习小程序之前你要掌握初步的html+css+javascript的基础知识。小程序起步到现在,越来越多的开发人员为其开发框架以及插件。
《HTML教程》 《HTML 参考手册》 《CSS教程》 《CSS参考手册》 《javascript教程》
//app.js
App({
onLaunch: function () {
// 展示本地存储能力 --- 从本地缓存中同步获取指定 key 对应的内容。
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
// wx.setStorageSync(KEY,DATA) --- 将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
// wx.getUserInfo(OBJECT) ---
// 注意:此接口有调整,使用该接口将不再出现授权弹窗,请使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作
// 当用户未授权过,调用该接口将直接报错,当用户授权过,可以使用该接口获取用户信息
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
//app.json --- 对整个小程序的全局配置。
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
//配置小程序的窗口
//背景色
//配置导航条样式
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
/**app.wxss --- 整个小程序的公共样式表**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
组件的使用,有
视图容器:
view 视图容器 该有的属性:hover-class,hover-stop-propagation,hover-start-time,hover-stay-time
scroll-view 可滚动视图区域:scroll-x,scroll-y,upper-threshold,lower-threshold,scroll-top,scroll-left,scroll-into-view,scroll-with-animation,enable-back-to-top,bindscrolltoupper,bindscrolltolower,bindscroll
swiper 滑块视图容器:indicator-dots,indicator-color,indicator-active-color,autoplay,current,current-item-id,interval,duration,circular,vertical,previous-margin,next-margin,display-multiple-items,skip-hidden-item-layout,bindchange,bindanimationfinish
movable-view 可移动的视图容器,在页面中可以拖拽滑动
cover-view 覆盖在原生组件之上的文本视图
基础内容:
icon 图标:type size color ---- iconType:'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
text 文本: selectable space decode
rich-text 富文本:nodes
progress 进度条:percent,show-info,stroke-width,color ,activeColor,backgroundColor,active,active-mode
表单组件:
button :按钮 size,type,plain,disabled,loading,form-type,open-type,hover-class,hover-stop-propagation,hover-start-time,hover-stay-time,lang,bindgetuserinfo,session-from,send-message-title,send-message-path,send-message-img,show-message-card,bindcontact,bindgetphonenumber,app-parameter,binderror,bindopensetting
checkbox :checkbox-group由多个checkbox组成。 value,disabled,checked,color
form :表单,将用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。 report-submit,bindsubmit,bindreset
input :输入框, value,type,password,placeholder,placeholder-style,placeholder-class,disabled,maxlength,cursor-spacing,auto-focus,focus,confirm-type,confirm-hold,cursor,selection-start,selection-end,adjust-position,bindinput,bindfocus,bindblur,bindconfirm
label :用来改进表单组件的可用性 for
picker :从底部弹起的滚动选择器,普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器
picker-view :嵌入页面的滚动选择器 value,indicator-style,indicator-class,mask-style,mask-class,bindchange
radio :radio-group 内部由多个<radio/>组成。单项选择器 bindchange --- value,checked,disabled,color
slider :滑动选择器 min,max,step,disabled,value,color,selected-color,activeColor,backgroundColor,block-size,block-color,show-value,bindchange,bindchanging
switch :开关选择器 checked,type,bindchange,color
textarea :多行输入框 value,placeholder,placeholder-style,placeholder-class,disabled,maxlength,auto-focus,focus,auto-height, fixed,cursor-spacing,cursor,show-confirm-bar,selection-start,selection-end,adjust-position,bindfocus,bindblur,bindlinechange,bindinput,bindconfirm
导航组件:
navigator : 页面链接 target,url,open-type,delta,app-id,path,extra-data,version,hover-class,hover-stop-propagation,hover-start-time,hover-stay-time
functional-page-navigator : 用于跳转到插件功能页。 version,name,args,bindsuccess,bindfail
媒体组件:
audio: 建议使用能力更强的 wx.createInnerAudioContext 接口 id,src,loop,controls,poster,name,author,binderror,bindplay,bindpause,bindtimeupdate,bindended
image: 图片 src,mode,lazy-load,binderror,bindload
video: 视频 src,initial-time,duration,controls,danmu-list,danmu-btn,enable-danmu,autoplay,loop,muted,page-gesture,direction,show-progress,show-fullscreen-btn,show-play-btn,show-center-play-btn,enable-progress-gesture,objectFit,poster,bindplay,bindpause,bindended,bindtimeupdate,bindfullscreenchange,bindwaiting,binderror
camera: 系统相机 --- 需要用户授权 scope.camera mode,device-position,flash,scan-area,bindstop,binderror,bindscancode
live-player: 实时音视频播放---需要先通过类目审核---“设置”-“接口设置”中自助开通该组件权限
live-pusher: 实时音视频录制---需要用户授权 scope.camera、scope.record
地图组件:
map: 地图 longitude,latitude scale,markers,covers -- 即将移除,请使用 markers ,polyline,circles,controls,include-points,show-location,bindmarkertap,bindcallouttap,bindcontroltap,bindregionchange,bindtap,bindupdated
画布组件:
canvas: 画布 canvas-id,bindtouchstart,bindtouchmove,bindtouchend,bindtouchcancel,bindlongtap,binderror
开发能力组件:
open-data: 展示微信开放的数据 type open-gid lang
web-view: 用来承载网页的容器 src bindmessage
ad: 广告
// 使用 <block/> 控制标签来组织代码
<!--logs.wxml-->
<view class="container log-list">
<block wx:for="{{logs}}" wx:for-item="log">
<text class="log-item">{{index + 1}}. {{log}}</text>
</block>
</view>
//logs.js
const util = require('../../utils/util.js')
Page({
data: {
logs: []
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(log => {
return util.formatTime(new Date(log))
})
})
}
})
生命周期,每个活动都有属于它的生命周期
onLoad:function(){
},
onReady:function(){
},
onShow:function(){
},
onHide:function(){
},
onUnload:function(){
},
App Launch->App Show->onLoad->onShow->onReady
wx.navigateTo(OBJECT):说明保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
wx.redirectTo(OBJECT):说明关闭当前页面,跳转到应用内的某个页面。
wx.switchTab(OBJECT):说明跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.navigateBack(OBJECT):说明关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。
wx.reLaunch(OBJECT):说明关闭所有页面,打开到应用内的某个页面。
微信小程序开发资源精选网址导航 微信小程序wepy框架开发资源汇总 微信小程序开发资源汇总
视图容器:视图、滚动视图、Swiper
基础内容:图标、文本、进度条
表单组件:按钮、表单
操作反馈
导航
媒体组件:音频、图片、视频。
地图
画布
网络:上传下载、WebSocket
数据:数据缓存
位置:获取位置、查看位置
设备:网络状态、系统信息、重力感应、罗盘
界面:设置导航条、导航、动画、 绘图等等
开放接口:登录,包括签名加密,用户信息、 微信支付、模板消息
项目分为视图层和逻辑层
<view> {{name}} </view>
<button bindtap="changeName"> Click </button>
Page({
data:{
name: '我最帅'
},
changName: function(e){
this.setData({
name: '我最帅了'
})
}
})
MINA程序主体 app.js app.json app.wxss 页面 wxml wxss json js
pages(必须) window tabBar networkTimeout debug
window
tabBar
color --- 文字颜色
selectedColor --- 中时的颜色
backgroundColor --- 背景色
borderStyle --- 边框的颜色, 仅支持 black/white
list --- 只能最少2个、最多5个
position --- ottom、top
//list
**81px * 81px**
iconPath --- 图片路径
selectedIconPath --- 选中时的图片路径
text --- 文字
pagePath --- 页面路径
networkTimeout
wx.request
wx.connectSocket
wx.uploadFile
wx.downloadFile
debug
略
page.json
//页面的.json只能设置window相关配置项
navigationBarBackgroundColor --- 背景颜色
navigationBarTextStyle --- 标题颜色
navigationBarTitleText --- 标题文字
backgroundColor --- 背景颜色
backgroundTextStyle --- 下拉 仅支持 dark/light
enablePullDownRefresh --- 是否开启下拉刷新
disableScroll --- 设置为true 整体不能上下滚动
注册程序App()函数 --- object参数
APP({
onLaunch: function(options) {
},
onShow: function(options) {
},
onHide: function() {
},
onError: function(msg) {
},
})
path
query
scene
shareTicket
referrerInfo
referrerInfo.appId
referrerInfo.extraData
1020 列表
1035 菜单
1036 消息卡片
1037 小程序打开小程序
1038 从另外一个小程序返回
1043 模板消息
onPageNotFound
App({
onPageNotFound(res) {
wx.redirectTo({
url: 'pages/...'
})
}
})
data
onLoad
onReady
onShow
onHide
onUnload
onPullDownRefresh
onReachBottom
onShareAppMessage
onPageScroll
//index.js
Page({
data: {
text: ""
},
onLoad: function(options) {
},
onReady: function() {
},
onShow: function() {
},
onHide: function() {
},
onUnload: function() {
},
onPullDownRefresh: function() {
},
onReachBottom: function() {
},
onShareAppMessage: function () {
},
onPageScroll: function() {
},
click: function() {
this.setData({
text: ''
})
},
})
<view>{{array[0].msg}}</view>
Page({
array: [{msg: '0'},{msg: '1'}]
})
onLoad --- 页面加载
onShow --- 页面显示
onReady --- 页面初次渲染
onHide --- 页面隐藏
onUnload --- 页面卸载
onPullDownRefresh: 下拉刷新
onReachBottom: 上拉触底
onPageScroll: 页面滚动
onShareAppMessage: 用户转发
<view bindtap = "click"> click </view>
Page({
click: function(){
console.log('我最帅')
}
})
Page.prototype.route 获取到当前页面的路径。
Page.prototype.setData() 将数据从逻辑层发送到视图,同时改变对应的 this.data 的值。
setData() 参数格式
以 key,value 的形式
<view>{{text}}</view>
this.setData({
text: '我最帅'
})
this.setData({
number: this.data.number
})
getCurrentPages()
onLoad, onSHow
module.exports 对外暴露接口
module.exports.sayHello = sayHello
require(path)将公共代码引入
var com = require('com.js')
INA的视图层由WXML与WXSS编写。
<view>{{object.key}} {{array[0]}}</view>
Page({
data: {
object: {
key: 'Hello '
},
array: ['我最帅']
}
})
<view wx:for-items="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
data: {
zero: 0
}
})
<template is="objectCom" data="{{for: a, bar: b}}"></template>
Page({
data: {
a: 1,
b: 2
}
})
data="{{...obj1, ...obj2, e: 5}}"
Page({
data: {
obj1: {
a: 1,
b: 2
},
obj2: {
c: 3,
d: 4
}
}
})
data="{{foo, bar}}"
Page({
data: {
foo: 'my-foo',
bar: 'my-bar'
}
})
wx:for index item
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
<view wx:for="{{array}}" wx:for-index="index" wx:for-item="item">
{{index}}:{{item.message}}
</view>
wx:for-index
wx:for-item
九九乘法表
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>
包含多节点的结果块:
<block wx:for="{{[1,2,3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
wx:key 指定列表中唯一的标识符。
wx:if wx:elif wx:else
<view wx:if="{{condition}}"> /view>
<view wx:elif="{{length > 2}}"> </view>
<view wx:else> </view>
不是一个组件,是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
template
<template name="name">
<view>
<text> {{index}}:{{msg}} </text>
<text> Time: {{teme}} </text>
</view>
</template>
<template is="name" data="{{...item}}"/>
Page({
data: {
index:0;
msg: 'this',
time: '0'
}
)}
<template name="n">
<view> </view>
</template>
<block wx:for="{{[ ]}}">
<template is="{{}}"/>
</block>
<view id="id" bindtap="bindtap"> </view>
Page({
bindtap: function(e){
console.log(e)
}
})
冒泡事件和非冒泡事件
事件会向父节点传递 事件不会向父节点传递
touchstart move cancel end
tap 手指触摸后马上离开 longtap 超过350ms
key以bind或catch开头,value是一个字符串
bind绑定不会阻止向上冒泡,catch会哦。
bindtap catchtap
事件对象
BaseEvent 础事件 CustomEvent 自定义事件 TouchEvent 触摸事件
import 和 include
<template name="name">
</template>
<import src="item.wxml/>
<template is="item data="{{}}"/>
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<wxs module="m">
var msg="hello";
module.exports.message=msg;
</wxs>
<view> {{m.message}} </view>
.wxs 为后缀名的文件
module.exports 对外暴露
每个wxs模块均有 module 对象。
exports:对外共享本模块
module.exports
module.exports.msg
<wxs src="./../tools.wxs" module="tools" />
require 函数
var tools = require("./tools.wxs");
标签 module src
number : 数值
string :字符串
boolean:布尔值
object:对象
function:函数
array : 数组
date:日期
regexp:正则
toString
toLocaleString
valueOf
toFixed
toExponential
toPrecision
toString
valueOf
charAt
charCodeAt
concat
indexOf
lastIndexOf
localeCompare
match
replace
search
slice
split
substring
toLowerCase
toLocaleLowerCase
toUpperCase
toLocaleUpperCase
trim
toString
valueOf
toString
concat
join
pop
push
reverse
shift
slice
sort
splice
unshift
indexOf
lastIndexOf
every
some
forEach
map
filter
reduce
reduceRight
parse(string):
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
POSITIVE_INFINITY
@import语句可以导入
view---hover-class,hover-start-time,hover-stay-time
<view class="section">
<view class="section_title"> flex:direction: row </view>
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item bc_green"><view>
</view>
</view>
<view class="section">
<view class="section_title"> flex-direction: column</view>
<view class="flex-wrp" style="flex-direction:column;">
<view class="flex-item bc_green"></view>
</view>
</view>
scroll-view
scroll-x,scroll-y upper-threshold,lower-threshold,
scroll-top,scroll-left,scroll-inio-view,scroll-with-animation
enable-back-to-top,bindscrolltoupper,bindscrolltolower,bindscroll
swiper
indicator-dots indicator-color indicator-active-color autoplay
current interval duration circular vertical bindchange
movable-view 的可移动区域
direction inertia out-of-bounds damping friction
cover-view 覆盖在原生组件之上的文本视图
cover-image
移动平台的先驱们
Android(Google) IOS (Apple) Windows Phone (Microsoft)
苹果重新定义的智能手机。 手机 平板电脑 电视 手表 智能汽车
移动互联网的痛 二分天下的终端格局 各自为政的应用商店 疲于奔命的开发者们 两种开发环境和工具 两套代码维护 两套发布系统 时间、成本、质量
CPT (cross-platform developer tools) 作用 可以使得开发者使用同样的工具在同一组基础代码上创建多个平台的应用 价值 开发大众化:降低跨平台开发的技术门槛 降低沉没成本:一套代码多平台共用
开发
集成
构建
发布
管理
概述
基本语法 数据类型 数值 字符串 对象 数组 函数 运算符 数据类型转换 错误处理机制 编程风格
语句 变量 标识符 注释 区块 条件语句 循环语句
var a = 1+3;
;;;
1+3;
'abc';
var a,b;
var a=1;
a='hello';
大小写敏感
第一个字符,可以是任意 Unicode 字母(包括英文字母和其他语言的字母),以及美元符号($)和下划线(_)。
第二个字符及后面的字符,除了 Unicode 字母、美元符号和下划线,还可以用数字0-9。
保留字
JavaScript有一些保留字,不能用作标识符:
arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。
注释 单行注释,用//起头 多行注释,放在/和/之间。
区块 JavaScript 使用大括号,将多个相关的语句组合在一起,称为“区块”(block)。 对于var命令来说,JavaScript 的区块不构成单独的作用域(scope)。
If else else if
Switch case
三元表达式 ? :
循环语句
循环语句
for
for语句的三个部分(initialize、test、increment),可以省略任何一个,也可以全部省略。
for in:用来循环带有字符串key的对象
for of:ES6里引入的新循环方法。能遍历多种类型数据,包括括数组、Set 和 Map 结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、 Generator 对象以及字符串。
数组内置的foreach方法
array=[];
array.forEach({
});
break语句和continue语句都具有跳转作用,可以让代码不按既有的顺序执行。
break语句用于跳出代码块或循环。
continue语句用于立即终止本轮循环,返回循环结构的头部,开始下一轮循环。
概述
typeof运算符:返回一个值的数据类型。
instanceof运算符:用来判断某个构造函数的prototype属性是否存在于另外一个要检测对象的原型链上。
Object.prototype.toString方法:判断某个对象值属于哪种内置类型。
概述 数值的表示法 数值的进制 特殊数值 与数值相关的全局方法
概述
JavaScript 内部,所有数字都是以64位浮点数形式储存,即使整数也是如此。所以,1与1.0是相同的,是同一个数。
国际标准 IEEE 754,JavaScript 浮点数的64个二进制位,从最左边开始,是这样组成的。
第1位:符号位,0表示正数,1表示负数
第2位到第12位(共11位):
指数部分第13位到第64位(共52位):小数部分(即有效数字)
JavaScript 能够表示的数值范围为21024到2-1023(开区间),超出这个范围的数无法表示。
数值的表示法
字面量
35 1.03 科学记数法
数值的进制
十进制:没有前导0的数值。
八进制:有前缀0o或0O的数值,或者有前导0、且只用到0-7的八个阿拉伯数字的数值。
十六进制:有前缀0x或0X的数值。
二进制:有前缀0b或0B的数值
特殊数值
JavaScript 内部实际上存在2个0:一个是+0,一个是-0,区别就是64位浮点数表示法的符号位不同。它们是等价的。
唯一有区别的场合是,+0或-0当作分母,返回的值是不相等的。
除以正零得到+Infinity,除以负零得到-Infinity,这两者是不相等的
表示“非数字”(Not a Number),主要出现在将字符串解析成数字出错的场合。
0除以0也会得到NaN。
NaN不是独立的数据类型,而是一个特殊数值,它的数据类型依然属于Number,使用typeof运算符可以看得很清楚。
NaN不等于任何值,包括它本身。
NaN在布尔运算时被当作false。
NaN与任何数(包括它自己)的运算,得到的都是NaN。
Infinity表示“无穷”,用来表示两种场景。
一种是一个正的数值太大Infinity,或一个负的数值太小 -Infinity,无法表示。
由于数值正向溢出(overflow)、负向溢出(underflow)和被0除,JavaScript 都不报错,而是返回Infinity
所以单纯的数学运算几乎没有可能抛出错误。
Infinity大于一切数值(除了NaN),-Infinity小于一切数值(除了NaN)。
Infinity与NaN比较,总是返回false。
Infinity与undefined运算 返回的都是NaN
parseInt():将字符串转为整数。
parseFloat():将一个字符串转为浮点数。
isNaN():判断一个值是否为NaN。
isFinite():某个值是否为正常的数值
如果字符串头部有空格,空格会被自动去除。
如果parseInt的参数不是字符串,则会先转为字符串再转换。
字符串转为整数的时候,是一个个字符依次转换,如果遇到不能转为数字的字符,就不再进行下去,返回已经转好的部分。
如果字符串的第一个字符不能转化为数字(后面跟着数字的正负号除外),返回NaN。
如果字符串以0x或0X开头,parseInt会将其按照十六进制数解析。
如果字符串以0开头,将其按照10进制解析。
对于那些会自动转为科学计数法的数字,parseInt会将科学计数法的表示方法视为字符串,因此导致一些奇怪的结果。
parseInt方法还可以接受第二个参数(2到36之间),表示被解析的值的进制,返回该值对应的十进制数。
概述
字符串就是零个或多个排在一起的字符,放在单引号或双引号之中。
单引号字符串的内部,可以使用双引号。双引号字符串的内部,可以使用单引号。
如果要在单引号字符串的内部,使用单引号,就必须在内部的单引号前面加上反斜杠,用来转义。双引号字符串内部使用双引号。
如果长字符串必须分成多行,可以在每一行的尾部使用反斜杠。
如果长字符串必须分成多行,可以在每一行的尾部使用反斜杠。
转义符
\0 :null(\u0000)
\b :后退键(\u0008)
\f :换页符(\u000C)
\n :换行符(\u000A)
\r :回车键(\u000D)
\t :制表符(\u0009)
\v :垂直制表符(\u000B)
\‘ :单引号(\u0027)
\“ :双引号(\u0022)
\\ :反斜杠(\u005C)
如果不同的变量名指向同一个对象,那么它们都是这个对象的引用,也就是说指向同一个内存地址。修改其中一个变量,会影响到其他所有变量。
如果行首是大括号,一律解释为语句(即代码块)。如果要解释为表达式(即对象),必须在大括号前加上圆括号。
这种差异在eval语句(作用是对字符串求值)中反映得最明显
读取属性:有两种方法,一种是使用点运算符,还有一种是使用方括号运算符。
如果使用方括号运算符,键名必须放在引号里面,否则会被当作变量处理。
In 运算符:用于检查对象是否包含某个属性(注意,检查的是键名,不是键值),如果包含就返回true,否则返回false。
for…in 循环:遍历一个对象的全部属性。
with语句的作用是操作同一个对象的多个属性时,提供一些书写的方便。
数组的本质
本质上,数组属于一种特殊的对象。typeof运算符会返回数组的类型是object。
length属性:返回数组成员的数量,只要是数组,就一定有length属性。该属性是一个动态的值,等于键名中的最大整数加上1。 in 运算符:检查某个键名是否存在的运算符in,适用于对象,也适用于数组。
概述
函数的属性和方法
函数的作用域
参数
函数的其他知识点
eval命令
函数外部声明的变量就是全局变量(global variable),它可以在函数内部读取。
在函数内部定义的变量,外部无法读取,称为“局部变量”(local variable)。
函数执行时所在的作用域,是定义时的作用域,而不是调用时所在的作用域。
很容易犯错的一点是,如果函数A调用函数B,却没考虑到函数B不会引用函数A的内部变量。
上面代码将函数x作为参数,传入函数y。但是,函数x是在函数y体外声明的,作用域绑定外层,因此找不到函数y的内部变量a,导致报错。
Javascript的“链式作用域” 结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。
Javascript在函数外部无法访问函数内部声明的变量,只有函数内部的子函数才能读取内部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。
闭包可以“记住”诞生的环境,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包的最大用处有两个,一个是可以读取函数内部的变量,另一个就是让这些变量始终保持在内存中,即闭包可以使得它诞生环境一直存在。
闭包的内存消耗很大,不能滥用。
Boolean() 除了以下五个值的转换结果为false,其他的值全部为true。
undefined
null
-0或+0
NaN
''(空字符串)
Error实例对象
原生错误类型
自定义错误
throw语句
try catch结构
finally代码块
message:错误提示信息
name:错误名称(非标准属性)
stack:错误的堆栈(非标准属性)
Array对象
Number对象
String对象
Math对象
Date对象
RegExp对象
JSON对象
console对象
Object对象
属性描述对象
包装对象
构造函数
静态方法
实例方法
Array对象
Array对象
实例方法
valueOf(),toString()
push(),pop()
shift(),unshift()
join()
concat()
reverse()
slice()
splice()
sort()
map()
forEach()
filter()
some(),every()
reduce(),reduceRight()
indexOf(),lastIndexOf()
valueOf():valueOf方法是一个所有对象都拥有的方法,表示对该对象求值。
不同对象的valueOf方法不尽一致,数组的valueOf方法返回数组本身。
toString方法也是对象的通用方法,数组的toString方法返回数组的字符串形式。
push():push方法用于在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度。注意,该方法会改变原数组。
pop方法用于删除数组的最后一个元素,并返回该元素。注意,该方法会改变原数组。
shift():用于删除数组的第一个元素,并返回该元素。注意,该方法会改变原数组。
unshift():用于在数组的第一个位置添加元素,并返回添加新元素后的数组长度。注意,该方法会改变原数组。
join():以指定参数作为分隔符,将所有数组成员连接为一个字符串返回。如果不提供参数,默认用逗号分隔。
如果数组成员是undefined或null或空位,会被转成空字符串。
concat():用于多个数组的合并。它将新数组的成员,添加到原数组成员的后部,然后返回一个新数组,原数组不变。
reverse():用于颠倒排列数组元素,返回改变后的数组。注意,该方法将改变原数组。
slice():用于提取目标数组的一部分,返回一个新数组,原数组不变。
splice():用于删除原数组的一部分成员,并可以在删除的位置添加新的数组成员,返回值是被删除的元素。注意,该方法会改变原数组。
sort():对数组成员进行排序,默认是按照字典顺序排序。排序后,原数组将被改变。
sort方法不是按照大小排序,而是按照字典顺序。也就是说,数值会被先转成字符串,再按照字典顺序进行比较。
map():将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回。
map方法课接受一个函数作为参数。该函数调用时,map方法向它传入三个参数:当前成员、当前位置和数组本身。
map方法还可以接受第二个参数,用来绑定回调函数内部的this变量。
如果数组有空位,map方法的回调函数在这个位置不会执行,会跳过数组的空位。
实例方法
Number对象
自定义方法
Number.prototype对象上面可以自定义方法,被Number的实例继承。
...
//
面向对象编程概述
This关键字
Prototype对象
Object对象与继承
面向对象编程的模式
面向对象编程概述
对象是什么
构造函数
New命令
Object.create()创建实例对象
面向对象编程(Object Oriented Programming,缩写为 OOP)是目前主流的编程范式。
它将真实世界各种复杂的关系,抽象为一个个对象,然后由对象之间的分工与合作,完成对真实世界的模拟。
每一个对象都是功能中心,具有明确分工,可以完成接受信息、处理数据、发出信息等任务。
对象可以复用,通过继承机制还可以定制。
因此,面向对象编程具有灵活、代码可复用、高度模块化等特点,容易维护和开发,比起由一系列函数或指令组成的传统的过程式编程(procedural programming),更适合多人合作的大型软件项目。
一本书、一辆汽车、一个人都可以是对象,一个数据库、一张网页、一个与远程服务器的连接也可以是对象。当实物被抽象成对象,实物之间的关系就变成了对象之间的关系,从而就可以模拟现实情况,针对对象进行编程。
属性是对象的状态,方法是对象的行为(完成某种任务)。
比如,我们可以把动物抽象为animal对象,使用“属性”记录具体是那一种动物,使用“方法”表示动物的某种行为(奔跑、捕猎、休息等等)
类:定义对象的特征。它是对象的属性和方法的模板定义。对象(或称实例):类的一个实例。
属性:对象的特征,比如颜色、尺寸等。
方法:对象的行为,比如行走、说话等。
构造函数:对象初始化的瞬间被调用的方法。
继承:子类可以继承父类的特征。例如,猫继承了动物的一般特性。
封装:一种把数据和相关的方法绑定在一起使用的方法。
抽象:结合复杂的继承、方法、属性的对象能够模拟现实的模型。
多态:不同的类可以定义相同的方法或属性。
含义
使用场合
使用注意点
绑定this的方法
含义
this就是属性或方法“当前”所在的对象。
使用场合
全局环境
全局环境使用this,它指的就是顶层对象window。
构造函数的缺点
Prototype属性的作用
原型链
constructor属性
instanceOf运算符
1.微信小程序介绍 2.微信小程序注册 3.编程基础知识 4.小程序架构搭建-从HelloWorld开始 5.图片组件和单击事件-以和弦查询为例
微信小程序的历史
如何访问小程序
小程序与HTML5、APP的比较
小程序与微信公众号的比较
小程序适合哪些应用
小程序开发需要的资质和能力
小程序的注册方法
小程序的开发工具
小程序的上架流程
ES5基础
WXML基础
WXSS基础
Mustache基础
WXS
WXML基础
WXML(WeiXin Markup Language)
WXML(WeiXin Markup Language)是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。
WXML基础
WXML组件
视图容器
基础内容
表单组件
导航
媒体组件
地图
画布
WXML组件
view
scroll-view
swiper
movable-view
cover-view
icon
text
rich-text
progress
button
checkbox
form
input
label
picker
picker-view
Radio
slider
switch
textarea
navigator
audio
image
video
camera
live-player
live-pusher
map
canvas
WXSS基础
WXSS与CSS的异同
WXSS语法
WXSS选择器
WXSS常用属性
目前支持CSS2,部分支持CSS3
使用@import可以导入外联样式表,使用相对路径
存在全局样式和局部样式
app.wxss是全局样式,页面的xxx.wxss是局部样式
类选择器
id选择器
元素选择器
伪元素选择器
背景属性
边框属性
字体属性
外边距属性
内边距属性
显示属性
颜色属性
Mustache基础
{{表达式}}:表达式求值,转义成html显式
{{{}}}:原样输出不转义html代码
或单独使用.wxs文件,然后在WXML中引入
<wxs module="foo">
var h_msg="h";
module.exports={ msg: h_msg,}
</wxs>
<view> {{foo.msg}} </view>
<wxs src="../../l.wxs" module="l"/>
app.js 小程序逻辑 必填
app.json 小程序公共设置 必填
app.wxss 小程序公共样式表 非必填
project.config.json 项目配置文件 自动生成 详情
.js 页面逻辑 必填
.wxml 页面结构 必填
.wxss 页面样式表 非必填
.json 页面配置 非必填
.wxs 微信的javascript模块 非必填
描述页面的这四个文件必须具有相同的路径与文件名
pages 设置页面路径
window 设置默认页面的窗口表现
tabBar 设置底部tab表现
networkTimeout设置网络超时时间
debug 设置是否开启debug模式
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。