页面基本配置

tabBar的设置

uni-app引入vantUi

设置动态的顶部文字

封装axios请求

小程序的生命周期函数 uni-app同时兼容

开启关闭下拉刷新

uni-app的分包

uni-app的路由微信小程序除前缀不同外其余一致

图片的预览

uni-app的自带弹框

页面基本配置

backgroundColor	下拉刷新的背景色,下拉刷新的部分才是背景
backgroundTextStyle	小程序的背景文本样式只有light浅色和dark深色两个值
navigationBarBackgroundColor	导航条的背景色
navigationBarTitleText	导航条的标题文本
navigationBarTextStyle	导航条的文本颜色只有black黑色和white白色两个值
onReachBottomDistance	触发触底方法的距离单位是px
enablePullDownRefresh	开启下拉刷新功能默认值是false

tabBar的设置

在uni-app中的 pages.json中进行配置

 "tabBar": {"color": "#000000",  "selectedColor": "#d00",  "borderStyle": "black","backgroundColor": "#ffffff",  "position": "bottom"，     "list": [{"pagePath": "pages/index/index", "text": "首页","iconPath": "static/icon/shouye.png", "selectedIconPath": "static/icon/pitch-icon/shouye.png"}// 此处进行配置第二个tabBar页面]}

注意事项

1 tabBar最少两个，最多五个

2 下面的字体图标需要两种颜色，未选中与被选中，建议下载好之后，当做图片使用

3 当tabBar设置为顶部的时候，将不在有图标，只会有文字

uni-app引入vantUi

1 内置终端npm安装vant小程序版本

2 新建wxcomponents文件夹，复制@vant里的dist文件夹。并粘贴改名为vant

3 可以删除因为引入vant生成的文件夹

4 正常引入vant所需，但是文件路径为“/wxcomponents/vant/.....”

5 在pages.json中修改配置。让其可以使用vant和npm配置，具体代码如下

设置动态的顶部文字

pages.json中，在新建文件时，会自动增加对应数据，可以在这里设置头部文字，也可以引入vant的样式

 "path": "pages/list/list","style": {"navigationBarTitleText": "列表","enablePullDownRefresh": false,"usingComponents": {"van-icon": "/wxcomponents/vant/icon/index",}}

封装axios请求

创建utils文件夹，在文件夹中添加http.js文件

function axios({url,method = "get",data = {}
}) {uni.showLoading({title: '拼命加载中...',mask: true})return new Promise((resolve, reject) => {uni.request({url: "https://www.uinav.com/api/public/v1" + url,method,data,success(res) {resolve(res.data)uni.hideLoading()},fail(err) {reject(err)uni.hideLoading()uni.showToast({title: "请求失败"})}})})
}export default axios

在页面使用时

引入

  import axios from '../../utils/http.js'

使用方法

 axios({ url: '/home/swiperdata'}).then(res => {console.log(res)})

小程序的生命周期函数 uni-app同时兼容

onLoad	页面加载时触发相当于vue的created生命周期
onReady	页面初次渲染完成时触发相当于vue的mounted生命周期
onShow	页面显示/切入前台时触发相当于vue的 activited
onHide	页面隐藏/切入后台时触发相当于vue的deActivited
onUnload	页面卸载时触发相当于vue的destroyed生命周期
onPullDownRefresh	下拉刷新的钩子函数
onReachBottom	上拉到底加载的钩子函数

开启关闭下拉刷新

uni.startPullDownRefresh() // 开启下拉刷新功能

uni.stopPullDownRefresh() // 停止下拉刷新的方法

而在微信小程序中，则是wx.startPullDownRefresh()

自定义小程序导航栏
1 在要使用的页面的pages里定义 "navigationStyle":"custom"

2 定义一个子组件，这个子组件就是自定义的头部导航栏,这个组件里没有onLode,可以使用mounted

uni.getSystemInfo({}) 可以获取手机基础信息

statusBarHeight为手机导航栏高度

3 使用的页面引入该组件，可以正常使用父子组件传值

注意：如果点击事件在该组件里不生效，可以尝试子传父传入事件触发

uni-app的分包

1 pages是小程序用来放页面的位置，在跟它同级的位置，创建分包文件夹，创建对应文件，格式如下

2 在 pages.json 中，配置分包

   "subPackages": [{"root": "packageOne","pages": [{"path": "search/search","style": {"navigationBarTitleText": "商品搜索","enablePullDownRefresh": true,"backgroundColor": "#d00","onReachBottomDistance": 260}}//在此处添加另一个页面，{path:....,style....}]  }]

root属性是分包的那个文件夹名称，pages数组中，放置分包的页面，其余和pages文件夹的页面配置一致

uni-app的路由微信小程序除前缀不同外其余一致

标签跳转

标签名

<navigator url="/pages/home/home"  open-type="navigate"></navigator>

open-type参数

navigate	会隐藏当前页面进入新页面页面栈最多十层
redirect	会销毁（关闭）当前页面进入新页面
switchTab	专门用来跳转tabbar页面他会销毁所有的非tabbar页面
navigateBack	关闭当前页面，返回上一级或多级
reLaunch	可跳转tabbar页面,会关闭所有的页面进入新页面

逻辑跳转

uni.navigateTo(OBJECT)	保留当前页面，跳转到应用内的某个页面
uni.redirectTo(OBJECT)	关闭当前页面，跳转到应用内的某个页面
uni.reLaunch(OBJECT)	关闭所有页面，打开到应用内的某个页面。
uni.switchTab(OBJECT)	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
uni.navigateBack(OBJECT)	关闭当前页面，返回上一页面或多级页面可通过 `getCurrentPages()` 获取当前的页面栈，决定需要返回几层
uni.preloadPage(OBJECT)	预加载页面，是一种性能优化技术

路由传参和接收参数

注意：switchTab不能传递参数

传参：wx.redirectTo({ url: '/pages/home/home?id='+id })

接收：在监听页面加载的onLoad函数形参options对象里解构

图片的预览

 // 图片预览preview(img) {  //点击的图片的网址//接受一个数组或字符串，里面的内容是要预览的图片的网址的集合let image = this.dataAll.pics.map(item => item.pics_mid_url)uni.previewImage({  //开启预览的apicurrent: img,   //当前点击的图片urls: image     //图片的集合})},

uni-app的自带弹框

弹出框

 uni.showToast({title: '添加成功',icon: 'checkbox',mask: true})

loading

  uni.showLoading({title: '拼命加载中...',mask: true})

添加收货地址

 addSite() {  //事件//uni-app获取用户收货地址的api  uni.chooseAddress({success(res) {   //成功时的回调console.log(res)}})}

checkbox组件的使用

因为它是封装好的组件，v-model 是不起作用的，设置其是否被勾选的值为 checked，可以通过 @click 来设置其点击事件，在事件中修改 checked 值 , 如果是循环的数据，在事件中传递下标来更改对应数据

微信小程序（uni-app）相关推荐

uni-app 微信小程序模仿 app二层楼功能
uni-app 微信小程序模仿 app二层楼功能先占个坑,今天应该写不完, 后续在慢慢补全更新终于写完了这个的计算量很大,我自己的安卓机测试的时候一卡一卡的,公司同事的iphone是没有问题 ...
H5页面内嵌到微信小程序和APP，做分享操作
前言最近接到项目新需求,H5项目需要内嵌到微信小程序和APP里,然后将H5页面分享出去,被分享的人可以点击消息跳转到H5页面.H5页面不难,难的是要与微信小程序和APP进行交互,因为以前也没有接触过 ...
微信小程序uni.getImageInfo踩坑大计划
B站https://www.bilibili.com/read/cv6317437 如果你在使用getImageInfo的时候真机调试没问题,上传生成体验版的时候或者是线上版本没反应,主要原因是网络图 ...
Android APP跳转微信小程序和APP跳转支付宝小程序传参
Android APP跳转微信小程序和APP跳转支付宝小程序传参微信开放文档链接 MINIPROGRAM_TYPE_PREVIEW:体验版. MINIPROGRAM_TYPE_TEST:开发版 MI ...
二手市场回收基于微信小程序和app两种应用开发uniapp
回收纸皮书籍.服装饰品.箱包鞋帽.床上用品.塑料制品.其他 ,微信小程序.app开发源码下载地址:请点击下载
Java后端对接微信支付(微信小程序、APP、PC端扫码)非常全，包含查单、退款
首先我们要明确目标,我们点击微信支付官网 ,我们主要聚焦于这三种支付方式,其中JSPAI与APP主要与uniapp开发微信小程序与APP对接,而NATIVE主要与网页端扫码支付对接 1.三种支付统一 ...
微信小程序、app集成微信支付
一.微信小程序支付开发文档:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_11&index=2 申请小程序 ...
微信小程序--在app.js 和其他页面中更改globalData的值
微信小程序--在app.js 和其他页面中更改globalData的值 app.js中修改其他页面 app.js中修改在app.js中,应当在小程序初始化完成以后再更改全局变量的值,即在onLau ...
uniapp的打包：h5、微信小程序以及APP方式
uniapp的打包:h5.微信小程序以及APP方式 H5打包微信小程序打包 App打包本人用的是HBuilder编译器,学习uniapp时b站某位大大推荐的,我刚开始接触代码时候也用过,那时候并不 ...
基于uniapp+vue+微信小程序+安卓app电影院订票小程序H5网站设计
开发技术:uniapp + vue + ElementUI + 微信小程序 + 安卓app + Springboot 开发工具环境:HBuilder + 微信开发者工具 + VsCode + Idea ...

微信小程序（uni-app）

页面基本配置

tabBar的设置

uni-app引入vantUi

设置动态的顶部文字

封装axios请求

小程序的生命周期函数 uni-app同时兼容

开启关闭下拉刷新

uni-app的分包

uni-app的路由微信小程序除前缀不同外其余一致

图片的预览

uni-app的自带弹框

添加收货地址

checkbox组件的使用

微信小程序（uni-app）相关推荐

最新文章

热门文章

微信小程序（uni-app）

页面基本配置

tabBar的设置

uni-app引入vantUi

设置动态的顶部文字

封装axios请求

小程序的生命周期函数 uni-app同时兼容

开启关闭下拉刷新

uni-app的分包

uni-app的路由 微信小程序除前缀不同外其余一致

图片的预览

uni-app的自带弹框

添加收货地址

checkbox组件的使用

微信小程序（uni-app）相关推荐

最新文章

热门文章

uni-app的路由微信小程序除前缀不同外其余一致