数据响应
- 定义数据： xx.js --> data: { 数据 }
渲染数据（xx.wxml）
- {{属性名}}
<组件 wx:for="{{数组}}"></组件>
wx:if wx:elif wx:else hidden(类似于 v-show) wx:for wx:key 指定索引值变量、单元值变量 <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} </view> 通过 wx:for 对数组数据进行遍历时，可以分别指定访问数组索引值变量和单元值的变量。 wx:for-index 指定索引值变量，wx:for-item 指定单元值变量
- 在.js文件内部，访问数据
this.data.属性名 - 修改数据
this.setData({属性名：新值})----> 自动更新视图
事件
常用的事件:tap,input,change,focus,blur事件监听
.wxml :
<组件 bind: 事件名字="回调函数"></组件><组件 bind:事件名称="回调函数"></组件> 或者 <组件 bind事件名称="回调函数"></组件> (bind之后没有:)- .js
回调函数（）{ }
事件对象
- .js
回调函数（e）{ e就是事件对象 } 作用
- 传参
<组件 data-属性="值" bind: 事件名字="回调函数"></组件> 回调函数（e）{ e.target.dataset.属性 }
- 传参
- .js
事件冒泡
- 阻止冒泡
<组件 catch: 事件名字="回调函数"></组件>
- 阻止冒泡
事件传参
小程序中不支持事件回调函数在模版中传递参数
获取元素data-params自定义属性值=>推荐使用event对象的target去获取对应触发元素自定义属性的值说明：event.target 获取触发事件的元素属性，例如自定义属性
Page({ // 事件回调函数 sayHi: function (ev) { // ev 即为事件对象，包含了事件相关信息 // 着重关注 ev.target.dataset 它可以获得 wxml 组件中以 data- 开头的自定义属性 console.log(ev.target.dataset); } }); <view class="child" data-name="小明" data-age="16" bind:tap="sayHi">点我试试</view>
生命周期
应用级别
app.js : onLaunch(res) { res.sence // 场景值 }
点击小程序右上角的胶囊的关闭时，并不会将小程序销毁而是处于后台运行的状态，当再次打开小程序时并不会触发 onLaunch 生命周期的监听，而是触发 onShow 将小程序重新前台运行。
页面级别
- page1.js onLoad(options) { options // 进入页面时携带的参数 }
API
- wx.XXXXXX ---> 看文档
网络请求
- wx.request({url: 'xxxx'}) ----- 不是ajax
url 必须是 https + 备案的
url 必须在小程序的后台管理系统中，添加进来
开发阶段，可以关闭校验 - 本身不支持promise。用success拿值
- wx.request({url: 'xxxx'}) ----- 不是ajax
rpx尺寸单位、@import样式导入、全局样式和局部样式、
1.rpx把所有设备的屏幕，在宽度上都分为750份(即：当前屏幕的总宽度为750rpx)
2.当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式
3.当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式.- 页面导航
声明式导航
1.导航到tabBar页面
tabBar页面指得是被配置为tabBar的页面.
在使用<navigator>组件跳转到指定的tabBar页面时,需要指定url属性和open-type属性,其中:
- url表示要跳转的页面的地址,必须以/开头
- open-type表示跳转的方式,必须以
switchTab
示例代码如下:
<navigator url="/page/message/message" open-type="seitchTab">导航到消息页面</navigator>
2.导航到非tabBar页面
非tabBar页面指得是没有被配置为tabBar的页面.
在使用<navigator>组件跳转到普通的非tabBar页面时,需要指定url属性和open-type属性,其中:
- url表示要跳转的页面的地址,必须以/开头
- open-type表示跳转的方式,必须以
navigate
示例代码如下:
<navigator url="/page/message/message" open-type="navigate">导航到消息页面</navigator>
注意:为了简便,在导航到非tabBar页面时,open-type="navigate"属性可以省略
3.后退导航
如果要后退到上一页面或多级页面,则需要指定open-type属性和delta属性,其中:
open-type的值必须是navigateBack,表示进行后退导航delta的值必须是数字,表示后退的层级.
示例代码如下:
<navigator open-type="navigateBack" delta="1">返回上一页</navigator>
注意:为了简便,如果只是后退到上一页面,则可以省略delta属性,因为其默认值就是1.
编程式导航
1.导航到tabBar页面
调用wx.switchTab(Object object) 方法,可以跳转到tabBar页面(不能携带参数)
2.导航到非tabBar页面
调用wx.navigateTo(Object object) 方法,可以跳转到tabBar页面(可以携带参数)
3.后退导航
调用wx.navigateBack(Object object) 方法,可以返回上一页面或多级页面.其中Object参数对象可选属性列表如下:
导航传参
1.声明式导航传参
navigator组件的url属性用来指定将要跳转的页面的路径.同时,路径的后面还可以携带参数:
- 参数与路径之间用?分隔
- 参数键与参数值用=相连
- 不同参数用&分隔
代码示例如下:
<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>
2.编程式导航传参
调用wx.navigateTo(Object object) 方法跳转页面时,也可以携带参数,代码示例如下:
//页面结构
<button bindtap="gotoinfo2">跳转info页面</button>
//通过编程式导航,跳转到info页面,并携带参数
gotoinfo2(){
wx.navigateTo({
url:"/pages/info/info?name=ls&gender=男"
})
}uniapp 配置网络请求
由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。
请参考 @escook/request-miniprogram 的官方文档进行安装、配置、使用
官方文档：https://www.npmjs.com/package/@escook/request-miniprogram
最终，在项目的 main.js 入口文件中，通过如下的方式进行配置：
import { $http } from '@escook/request-miniprogram'
uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'
// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
uni.showLoading({
title: '数据加载中...',
})
}
// 请求完成之后做一些事情
$http.afterRequest = function () {
uni.hideLoading()
}配置小程序分包
分包可以减少小程序首次启动时的加载时间
为此，我们在项目中，把 tabBar 相关的 4 个页面放到主包中，其它页面（例如：商品详情页、商品列表页）放到分包中。在 uni-app 项目中，配置分包的步骤如下：
1.在项目根目录中，创建分包的根目录，命名为 subpkg
2.在 pages.json 中，和 pages 节点平级的位置声明 subPackages 节点，用来定义分包相关的结构：
{
"pages": [
{
"path": "pages/home/home",
"style": {}
},
{
"path": "pages/cate/cate",
"style": {}
},
{
"path": "pages/cart/cart",
"style": {}
},
{
"path": "pages/my/my",
"style": {}
}
],
"subPackages": [
{
"root": "subpkg",
"pages": []
}
]
}
最新回复