微信小程序
2022-10-07 13:39:03 0 举报AI智能生成
微信小程序知识点
作者其他创作
大纲/内容
模板语法
数据绑定
文本渲染{{}}
属性渲染 class="{{ className }}"
条件渲染
if
wx:if="{{条件}}"
wx:elif="{{条件}}"
wx:else
hidden="{{条件}}"
列表渲染
<block wx:for="{{array}}" wx:key="{{index}}">
<text>{{item}}</text>
</block>
<text>{{item}}</text>
</block>
自定义循环元素变量名称及下标
<view wx:for="{{array}}" wx:key="{{idx}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
{{idx}}: {{itemName.message}}
</view>
wx:key
字符串
for 循环的 array 中 item 的某个 property
保留关键字 *this
代表在 for 循环中的 item 本身
事件
添加事件
bind
添加事件存在事件冒泡
catch
添加事件不存在事件冒泡
事件类型
touchstart
touchmove
touchcancel
touchend
tap
longpress
data及数据更新
data中存放数据msg
wxml使用：{{msg}}
更新视图及数据this.setData({msg:"张三"})
自定义组件
组成
json
声明文件为组件component:true
wxml
wxss
js
使用
页面json文件 "usingComponents": {
"component-tag-name": "path/to/the/custom/component"
}
"component-tag-name": "path/to/the/custom/component"
}
组件样式
样式隔离
isolated
apply-shared
shared
slot
默认只有一个
多个需要配置options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
事件传播
生命周期
created
attached
ready
moved
error
detached
behaviors
observers
内置api
路由
switchTab
reLaunch
redirectTo
navigateTo
navigateBack
界面
交互
showToast
showModal
showLoading
hideToast
hideLoading
导航栏
setNavigationBarTitle
setNavigationBarColor
hideHomeButton
下拉刷新
stopPullDownRefresh
startPullDownRefresh
滚动pageScrollTo
网络
request
uploadFile
数据缓存
setStorageSync
setStorage
removeStorageSync
removeStorage
getStorageSync
getStorageInfoSync
getStorageInfo
getStorage
clearStorageSync
clearStorage
位置
开放接口
login
getUserProfile
openSetting
getSetting
AuthSetting
微信小程序特征
小程序依赖微信
快，免去下载及安装
小，单个包文件不能超出2M，总大小不能超出20M
强，微信有什么它也拥有
广，传播微信圈子近10亿用户
小程序官方文档地址
开发前准备
注册开发者账户
下载微信开发工具
微信开发工具简介
项目结构
sitemap.json
project.config.json
app.wxss
app.json
utils目录
pages目录
小程序页面
js
wxml
wxss
json
框架配置
app.json
pages
window
navigationBarBackgroundColor
navigationBarTextStyle
black
white
navigationBarTitleText
navigationStyle
default
custom
backgroundColor
tabBar
color
selectedColor
backgroundColor
borderStyle
position
custom
list
pagePath
text
iconPath
selectedIconPath
subpackages
root
name
pages
independent
页面json
enablePullDownRefresh
true
false
nReachBottomDistance
usingComponents
其他参考app.json
内置组件
视图容器
scroll-view
swiper滑块视图容器
view视图容器
text文本
表单组件
button按钮
checkbox多选框
form表单
input输入框
picker滚动选择器
普通选择器
多列选择器
时间选择器
日期选择器
省市区选择器
radio单选
switch开关选择器
textarea多行输入框
导航组件
navigator
媒体组件
image
0 条评论
下一页
