学习笔记
一，小程序 页面 结构
.wxml` : 用来描述当前这个页面的标签结构，同时提供了类似于 `Vue` 中指令的语法
.js` : 用来定义当前页面中用到的数据、交互逻辑和响应用户的操作
.json` : 用来定义当前页面的个性化配置，例如，为每个页面单独配置顶部颜色、是否允许下拉刷新等
.wxss` : 用来定义样式来美化当前的页面
小程序 像素单位 rpx 1rpx = 0.5px = 1物理像素比
在wxss 中 可以导入其他的样式wxss @import "/assets/common/common.wxss"
全局样式写着 app.wxss里面
局部样式写在 对应的wxss里面 一个正常的小程序页面 必然 会有 .js .wxml .json .wxss
二，常用组件
text 类似html中的p标签
view 类似html中的div
button 按钮
input 输入框
image 类似 html中的 img
tabber配置 在app.json中添加
生命周期函数
小程序没有双向数据绑定 在页面中之间 插值表达式 {{}} 函数中更新变量需要 调用 this.setData({})
<!-- 页面结构 -->
<input bindinput='datasync' value='{{ msg }}'></input>
// 页面逻辑
Page({
data: {
msg: ''
},
// 数据同步演示
datasync: function (e) {
console.log(e.detail.value)
this.setData({
msg: e.detail.value
})
}
// coding...
})
触摸事件 bindtap bindinput
<button bindtap='handle' type='warn'>我是按钮</button>
<input bindinput='inputHandle' value='输入框'></input>
<input bindinput='datasync' value='{{ msg }}'></input>
小程序的事件传参 只能自定义属性 通过自定义属性 ，事件对象接收
<!-- 页面结构 -->
<button bindtap='eventHandle' type='primary' data-info='info'>传递参数</button>
// 页面逻辑
Page({
data: {},
eventHandle: function (e) {
console.log(e.target.dataset.info)
}
// coding...
})
条件渲染 wx:if **`<block/>` 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性
wx:if
<block wx:if='{{ id == 10 }}'>
<view>JavaScript</view>
<view>HTML</view>
<view>CSS</view>
</block>
hidden
<view hidden='{{ id > 10 }}'>前端三板斧</view>
列表渲染
<block wx:for='{{ arr }}' wx:key='index'>
<view>值：{{item}} -- 索引{{index}}</view>
</block>
下拉刷新
在 `app.json` 的 `window` 选项中或页面配置中开启 `enablePullDownRefresh`。
可以通过 `wx.startPullDownRefresh()` 触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
为页面添加 `onPullDownRefresh()` 函数，可以监听用户在当前页面的下拉刷新事件
上拉刷新
在 `app.json` 的 `window`选项中或页面配置中设置触底距离 `onReachBottomDistance`。单位为`px`，默认触底距离为 `50px`。
为页面添加 `onReachBottom()` 函数，可以监听用户在当前页面的上拉触底事件，从而实现上拉加载更多列表数据的效果。
页面滑动事件`onPageScroll`
分享事件 `onShareAppMessage`
点击 tab 时触发事件 `onTabItemTap`
三，导航
1.声明式导航
<navigator url="/pages/about/about">跳转到 非tabBar 页面</navigator>
<navigator url="/pages/person/person" open-type="switchTab">跳转到 tabBar 页面</navigator>
<navigator open-type='navigateBack' delta='1'> 返回上一页 </navigator>
<navigator open-type='navigateBack' delta='2'> 返回上上一页 </navigator>
2.编程式导航
// 跳转到非导航页面
handle: function () {
wx.navigateTo({
url: '/pages/about/about',
success: function () {
console.log('Hello about')
}
})
},
// 跳转到 tabBar 页面
tabBarHandle: function () {
wx.switchTab({
url: '/pages/person/person',
success: function() {
console.log('Hello Person')
}
})
},
// 后退导航
handle: function () {
wx.navigateBack({
delta: 1
})
},
3.导航传参
<navigator url="/pages/about/about?age=18&name=shuji">跳转到 about 页面</navigator>
// 跳转到 tabBar 页面
tabBarHandle: function () {
wx.switchTab({
url: '/pages/person/person?age=18&name=shuji',
success: function() {
console.log('Hello Person')
}
})
},
// 接收页面传参
onLoad: function (options) {
// 打印传递出来的参数
console.log(options)
},
四，请求发送
get请求
getData: function () {
wx.request({
url: 'xxxx',
method: 'get',
success: function (res) {
console.log(res)
}
})
},
post请求
postData: function () {
wx.request({
url: 'https://www.liulongbin.top:8082/api/post',
method: 'post',
data: {
name: 'shuji'
},
success: function (res) {
console.log(res)
}
})
},
五，组件注册
1.创建组件
在根目录 创建 components 文件夹 创建一个组件(组件就是一个页面不用多说了吧)
2.组件的使用
在需要引用组件的页面中，找到页面的 `.json` 配置文件，新增 `usingComponents` 节点
{
"usingComponents": {
"first-com": "../../component/com01/com01"
}
}
发表评论