网站开发职业定位,怎么宣传自己新开的店铺,常州专业网站建设公司哪家好,做微网站用什么框架文章目录 rpx响应式单位import导入css样式及scss变量用法与static目录import导入css样式uni.scss变量用法 pages.json页面路由globalStyle的属性pages设置页面路径及窗口表现tabBar设置底部菜单选项及iconfont图标 vite.config中安装插件unplugin-auto-import自动导入vue和unia… 文章目录 rpx响应式单位import导入css样式及scss变量用法与static目录import导入css样式uni.scss变量用法 pages.json页面路由globalStyle的属性pages设置页面路径及窗口表现tabBar设置底部菜单选项及iconfont图标 vite.config中安装插件unplugin-auto-import自动导入vue和uniappuni-api交互反馈uni.showToastuni.hideToastuni.showLoadinguni.showModaluni.showActionSheet 动态设置页面导航栏样式uni.setNavigationBarTitleuni.setNavigationBarColoruni.showNavigationBarLoadinguni.hideHomeButton 动态设置TabBar样式uni.setTabBarItemuni.setTabBarStyleuni.hideTabBaruni.showTabBaruni.setTabBarBadgeuni.removeTabBarBadgeuni.showTabBarRedDotuni.hideTabBarRedDot 下拉刷新 onPullDownRefreshuni.startPullDownRefresh(OBJECT)uni.stopPullDownRefresh() 页面和路由uni.navigateTo(OBJECT)uni.reLaunch(OBJECT)uni.navigateBack(OBJECT) StorageSync数据缓存APIuni.setStorageuni.setStorageSync(KEY,DATA)uni.getStorageuni.getStorageSync(KEY)uni.getStorageInfouni.getStorageInfoSync()uni.removeStorage(OBJECT)uni.removeStorageSync(KEY)uni.clearStorage()uni.clearStorageSync() 网络uni.request发起网路请求3种回调结果调用uni.request参数datamethod有效值headertimeout rpx响应式单位
rpx 即响应式 px一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准750rpx 恰好为屏幕宽度。也就是说在拿到设计稿后要把稿件宽度等比缩放为750再测量各区域的大小。在MasterGo即时设计中都有相应的功能。
import导入css样式及scss变量用法与static目录
import导入css样式
之前都是在页面中定义CSS现在再介绍两种写入css样式的方法。 一种是在主组件app.vue中定义页面的公共css这样定义可以作用于整个程序但它的权重是最低的。 还有一种方法是把这些css都放到一个公共的目录common中去 先创建common目录选中项目-新建-目录 新建好后可以在里面创建.css文件就可以在里面设置CSS样式了最后去app.vue的style中导入这个css样式代码如下
style langscssimport /common/css/style.css;
/style效果跟在公共css中写入是一样的这种写法使整个程序更有条理些。
uni.scss变量用法
在项目根目录中有个uni.scss文件 打开后里面有很多内置的样式变量可以直接拿来用的现在拿个文字颜色过来试试注意只需要取$“至”: 前的内容即可 放到Style中就可以正常使用了
style langscss scoped.layout{font-size: 70rpx;color: $uni-color-primary;}
/style我们也可以在uni.scss中自己自定义样式的模仿它的格式比如像这样记住要以$符号开头
$custom-color-1:blue;
$custom-color-2:yellow;这里要注意的是uni.scss是预编译的在我们自定义后需要重启一下才可以使用自定义的样式。
可以给自定义的样式单独创建一个scss文件然后再去在uni.scss中引入
import/common/scss/self.scss ;pages.json页面路由
globalStyle的属性
pages.json 文件用来对 uni-app 进行全局配置决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。打开pages.json这是globalStyle区域的代码在其中也是可以配置单个页面的单个页面的权重是大于globalStyle下面是备注过的代码
{pages: [ {path: pages/index/index,style: {navigationBarTitleText: uni-app}}],globalStyle: {navigationBarTextStyle: white,//导航栏标题颜色仅支持black/whitenavigationBarTitleText: uni-app,//导航栏文字内容navigationBarBackgroundColor: #2B9939,// 导航栏背景颜色navigationStyle:custom//导航栏样式仅支持 default/custom。custom即取消默认的原生导航栏enablePullDownRefresh:true,//是否开启下拉刷新backgroundColor: #F8F8F8//下拉显示出来的窗口背景色仅微信小程序支持backgroundTextStyle:light//下拉 loading 的样式仅支持 dark / lightonReachBottomDistance:250//页面上拉触底事件触发时距页面底部距离单位只支持px},uniIdRouter: {}
}
其中onReachBottomDistance属性要配合生命周期onReachBottom使用的该属性表示页面触底事件触发时距页面底部距离默认值是50。现在在页面中写上onReachBottom来测试一下代码如下
templateview classlayoutview classbox v-foritem in 100{{item}}/view/view
/templatescript setup
import {onReachBottom} from dcloudio/uni-app
onReachBottom((){console.log(到底了);
})
/scriptstyle langscss scoped.layout{font-size: 70rpx;color: $custom-color-2;}
/style
效果
pages设置页面路径及窗口表现
通过pages可以对单个页面进行设置uni-app 通过 pages 节点配置应用由哪些页面组成pages 节点接收一个数组数组每个项都是一个对象代表着每个页面其属性值如下 pages中Style配置项跟刚刚讲过的globalStyle一样在这里就不多说了它的权重是要高于 globalStyle的。
tabBar设置底部菜单选项及iconfont图标
tabBar设置的就是小程序底部的菜单栏一般来说list属性是必须的List设置的是tab 的列表最少2个最多5个 tablist是在数组中的每个对象用大括号括起来包括tabBar中的各种常用属性都已做好备注在代码中了
{pages: [ //pages数组中第一项表示应用启动页参考https://uniapp.dcloud.io/collocation/pages{path: pages/index/index,style: {navigationBarTitleText: 页面}},{path : pages/user/user,style : {navigationBarTitleText : user}},{path : pages/classify/classify,style : {navigationBarTitleText : }}],globalStyle: {navigationBarTextStyle: black,//导航栏标题颜色仅支持black/whitenavigationBarTitleText: 默认页面,//导航栏文字内容navigationBarBackgroundColor: #2B9939,// 导航栏背景颜色navigationStyle:default,//导航栏样式仅支持 default/custom。custom即取消默认的原生导航栏enablePullDownRefresh:true,//是否开启下拉刷新backgroundColor: #CAF0DF,//下拉显示出来的窗口的背景色backgroundTextStyle:light,//下拉 loading 的样式仅支持 dark / lightonReachBottomDistance:250},tabBar: {color: #8b2671,//文字颜色selectedColor: #e9ccd3,//选中后文字颜色list: [{pagePath: pages/index/index,//页面路径text: 首页,//导航文字内容iconPath: static/tabBar/home.png,//未选中时的图片selectedIconPath: static/tabBar/home-h.png//选中时的图片},{pagePath: pages/classify/classify,text: 分类,iconPath: static/tabBar/classify.png,selectedIconPath: static/tabBar/classify-h.png},{pagePath: pages/user/user,text: 我的,iconPath: static/tabBar/user.png,selectedIconPath: static/tabBar/user-h.png}]},uniIdRouter: {}
}
效果
vite.config中安装插件unplugin-auto-import自动导入vue和uniapp
之前使用生命周期钩子和ref时每次都要写导入代码安装一个插件这样就可以免去导入的步骤了。
首先安装 Node.js然后右键项目使用命令行窗口打开目录 然后输入以下代码按下回车。
npm install unplugin-auto-import安装成功后会出现一个node_modules文件夹。
继续进行设置在根目录下创建一个vite.config.js文件夹并拷贝以下代码
import { defineConfig } from vite
import uni from dcloudio/vite-plugin-uni
import AutoImport from unplugin-auto-import/viteexport default defineConfig({plugins: [uni(), // 自动导入配置AutoImport({imports:[// 预设vue,uni-app ]})]
})设置完毕现在把导入的vue和uniapp去掉 也可以正常使用了。
uni-api交互反馈
uni.showToast
显示消息提示框参数如下 常用的一般有title即提示框的提示内容 icon提示框图标默认是success有以下值 image自定义图标。演示一下上面几种参数代码如下
templateview classlayoutview classbox v-foritem in 100{{item}}/view/view
/templatescript setup
uni.showToast({title:操作失败,icon:error ,//单行显示去掉图标就可以多行显示了image:../../static/tabBar/user.png
})
/scriptstyle langscss scoped.layout{font-size: 70rpx;color: $custom-color-2;}
/style
效果 mask参数即消息提示框未消失时无法点击页面的其他操作。先设置mask参数为false设置一个页面跳转注意navigator默认只能跳转到非TabBar界面要是想跳转到TabBar界面要使用reLaunch属性代码如下
templateview classlayoutnavigator open-typereLaunch url/pages/user/user用户/navigator view classbox v-foritem in 100{{item}}/view/view
/templatescript setup
uni.showToast({title:操作失败,icon:error,//单行显示去掉图标就可以多行显示了image:../../static/tabBar/user.png,mask:false
})
/scriptstyle langscss scoped.layout{font-size: 70rpx;}
/style
提示框未消失依然可以点击页面跳转按钮 修改mask参数为true在提示框未消失前是无法点击跳转按钮的
uni.hideToast
隐藏消息提示框我们用个按钮来演示一下uni.hideToast代码如下
templateview classlayoutnavigator open-typereLaunch url/pages/user/user用户/navigatorbutton clickshow显示/buttonbutton clickhide隐藏/buttonview classbox v-foritem in 100{{item}}/view/view
/templatescript setupfunction show(){uni.showToast({title:操作失败,duration:3000, //提示的延迟时间单位毫秒默认1500})}function hide(){uni.hideToast()}/scriptstyle langscss scoped.layout{font-size: 70rpx;}
/style
效果
uni.showLoading
显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。这里我们设置2秒后关闭Loading提示框 演示代码如下
templateview class个人中心/view
/templatescript setupuni.showLoading({title:加载中...,mask:true})setTimeout((){uni.hideLoading()},2000)
/scriptstyle langscss scoped/style
效果
uni.showModal
显示模态弹窗可以只有一个确定按钮也可以同时有确定和取消按钮。比如说用户要删除某个东西这时就可以弹窗询问是否要删除。演示代码如下
templateview class分类页面button clickremove删除/button/view
/templatescript setupfunction remove(){uni.showModal({title:是否删除})}
/scriptstyle langscss scoped/style
效果 uni.showModal的参数如下 取消按钮、确认按钮的文字颜色提示的内容标题都可以自定义。
现在演示一下后三个参数以success为例它会给我们一个回调函数拿到这个回调函数我们可以让它返回一个提示弹窗“删除成功”代码如下
templateview class分类页面button clickremove删除/button/view
/templatescript setupfunction remove(){uni.showModal({title:是否删除,// content:删除后不会恢复,confirmColor:#8b2671,confirmText:Yes,editable:true,//显示输入框success:res{if(res.confirm){uni.showToast({title:删除成功})}}})}
/scriptstyle langscss scoped/style
效果 这段代码中我们开始了输入框在输入框中输入内容点击确定后可以回调输入的内容拿到后我们可以做些输入判断、校验之类的操作。
uni.showActionSheet
从底部向上弹出操作菜单参数如下 比较重要的是itemList参数了使用时要用数组把内容框起来演示代码如下
templateview class分类页面button clickselect学历/button/view
/templatescript setupfunction select(){uni.showActionSheet({title:请选择学历,//菜单标题itemList:[高中,大专,本科,研究生],//选择项itemColor:#ef475d,//按钮的文字颜色})}
/scriptstyle langscss scoped/style
效果 我们选择哪一项也是通过success回调结果的不过因为itemList是个数组回调给我们的结果是索引值 要是想回调结果是实际内容需要把数组设置为变量代码如下
templateview class分类页面button clickselect学历/button/view
/templatescript setuplet arrs [高中,大专,本科,研究生];function select(){uni.showActionSheet({title:请选择学历,//菜单标题itemList:arrs,success:res{console.log(res)console.log(arrs[res.tapIndex]);}})}
/scriptstyle langscss scoped/style
动态设置页面导航栏样式
uni.setNavigationBarTitle
动态设置当前页面的标题。 演示一下这里用定时器定时让其2秒钟后改变标题
templateview class分类页面button clickselect学历/button/view
/templatescript setupsetTimeout((){uni.setNavigationBarTitle({title:动态标题})},2000)let arrs [高中,大专,本科,研究生];function select(){uni.showActionSheet({title:请选择学历,//菜单标题itemList:arrs,success:res{console.log(res)console.log(arrs[res.tapIndex]);}})}
/scriptstyle langscss scoped/style效果
uni.setNavigationBarColor
设置页面导航条颜色。
uni.showNavigationBarLoading
在当前页面显示导航条加载动画。它有点类似于uni.showLoading如果想让它结束再写上个uni.hideNavigationBarLoading就行了演示代码
templateview class分类页面button clickselect学历/button/view
/templatescript setupsetTimeout((){uni.hideNavigationBarLoading({})},2000)uni.showNavigationBarLoading({})let arrs [高中,大专,本科,研究生];function select(){uni.showActionSheet({title:请选择学历,//菜单标题itemList:arrs,success:res{console.log(res)console.log(arrs[res.tapIndex]);}})}
/scriptstyle langscss scoped/style效果
uni.hideHomeButton
隐藏返回首页按钮非主页面的左上角都会默认有一个返回首页按钮使用该API可以实现隐藏 隐藏后的效果
动态设置TabBar样式
uni.setTabBarItem
动态设置 tabBar 某一项的内容。建议是在app.vue中设置这样会应用于所有页面演示代码如下
scriptexport default {onLaunch: function() {uni.setTabBarItem({index:1,text:自定义})},onShow: function() {console.log(App Show)},onHide: function() {console.log(App Hide)}}
/scriptstyle langscssimport /common/css/style.css
/style
效果 其他参数如图
uni.setTabBarStyle
动态设置 tabBar 的整体样式。参数如图
uni.hideTabBar
隐藏 tabBar。
uni.showTabBar
显示 tabBar。
uni.setTabBarBadge
为 tabBar 某一项的右上角添加文本。一般都是添加数字文字太多的话显示不出来代码如下
scriptexport default {onLaunch: function() {uni.setTabBarBadge({index:1,text:99})},onShow: function() {console.log(App Show)},onHide: function() {console.log(App Hide)}}
/scriptstyle langscssimport /common/css/style.css
/style
效果
uni.removeTabBarBadge
移除 tabBar 某一项右上角的文本。
uni.showTabBarRedDot
显示 tabBar 某一项的右上角的红点。跟刚刚在tabBar右上角显示增加文本一样这里是在右上角显示红点代码如下
scriptexport default {onLaunch: function() {uni.setTabBarBadge({index:1,text:99})uni.showTabBarRedDot({index:2,})},onShow: function() {console.log(App Show)},onHide: function() {console.log(App Hide)}}
/scriptstyle langscssimport /common/css/style.css
/style
效果
uni.hideTabBarRedDot
隐藏 tabBar 某一项的右上角的红点。刚刚我们设置了红点现在可以在相应的页面中使用uni.hideTabBarRedDot去隐藏红点代码如下
templateview class个人中心/view
/templatescript setuponShow((){uni.hideTabBarRedDot({index:2})})uni.showLoading({title:加载中...,mask:true})
/scriptstyle langscss scoped/style
下拉刷新 onPullDownRefresh
下拉刷新操作需要在 pages.json 里找到的当前页面的pages节点并在 style 选项中开启 enablePullDownRefresh。
uni.startPullDownRefresh(OBJECT)
开始下拉刷新调用后触发下拉刷新动画效果与用户手动下拉刷新一致。在这里我们可以用个定时器设定一秒钟后开始刷新。
setTimeout((){uni.startPullDownRefresh()},1000)uni.stopPullDownRefresh()
停止当前页面下拉刷新。代码如下
templateview classcontentbutton clickstop停止/button/view
/templatescriptsetTimeout((){uni.startPullDownRefresh()},1000)function stop(){uni.stopPullDownRefresh()}
/scriptstyle/style效果
页面和路由
uni.navigateTo(OBJECT)
保留当前页面跳转到应用内的某个页面。使用uni.navigateBack可以返回到原页面。 其实跟navigator一样的作用新建demo1和demo2两个页面点击后从demo1跳转到demo2代码如下
templateview classview clickgoDemo2跳转到demo2/view/view
/templatescript setupfunction goDemo2(){uni.navigateTo({url:/pages/demo2/demo2})}
/scriptstyle langscss scoped/style
uni.reLaunch(OBJECT)
关闭所有页面打开到应用内的某个页面。 刚刚navigateTo参数是没法跳转到TabBar页面的但reLaunch可以演示代码:
templateview classview clickgoDemo2跳转到classify/view/view
/templatescript setupfunction goDemo2(){uni.reLaunch({url:/pages/classify/classify})}
/scriptstyle langscss scoped/style
uni.navigateBack(OBJECT)
关闭当前页面返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈决定需要返回几层。代码如下
templateview classbutton clickgoDemo1返回Demo1/button/view
/templatescript setupfunction goDemo1(){uni.navigateBack()}console.log(getCurrentPages())
/scriptstyle langscss scoped/style
效果
StorageSync数据缓存API
uni.setStorage
将数据存储在本地缓存中指定的 key 中会覆盖掉原来该 key 对应的内容这是一个异步接口。
uni.setStorageSync(KEY,DATA)
将 data 存储在本地缓存中指定的 key 中会覆盖掉原来该 key 对应的内容这是一个同步接口。
templateview classcontent/view
/templatescript setupuni.setStorageSync(key1,hello moto)uni.setStorageSync(key2,王二麻子)uni.setStorageSync(arrs,[one,two,three]);
/scriptstyle scoped/style
查看缓存的值
uni.getStorage
从本地缓存中异步获取指定 key 对应的内容。
uni.getStorageSync(KEY)
从本地缓存中同步获取指定 key 对应的内容。使用这个参数取key1的值代码如下
templateview classcontent/view
/templatescript setupuni.setStorageSync(key1,hello moto)uni.setStorageSync(key2,王二麻子)uni.setStorageSync(arrs,[one,two,three]);let myName uni.getStorageSync(key1)console.log(myName);
/scriptstyle scoped/style
取到值了
uni.getStorageInfo
异步获取当前 storage 的相关信息。
uni.getStorageInfoSync()
同步获取当前 storage 的相关信息。简单来说就是读取当前所有的key演示代码
templateview classcontent/view
/templatescript setupuni.setStorageSync(key1,hello moto)uni.setStorageSync(key2,王二麻子)uni.setStorageSync(arrs,[one,two,three]);let myName uni.getStorageSync(key1)console.log(myName);const res uni.getStorageInfoSync();console.log(res);
/scriptstyle scoped/style
效果
uni.removeStorage(OBJECT)
从本地缓存中异步移除指定 key。
uni.removeStorageSync(KEY)
从本地缓存中同步移除指定 key。写个简单的代码演示一下
templateview classcontentbutton clickremove删除key2/button/view
/templatescript setupuni.setStorageSync(key1,hello moto)uni.setStorageSync(key2,王二麻子)uni.setStorageSync(arrs,[one,two,three]);let myName uni.getStorageSync(key1)console.log(myName);const res uni.getStorageInfoSync();console.log(res);function remove(){uni.removeStorageSync(key2)}
/scriptstyle scoped/style
效果
uni.clearStorage()
清理本地数据缓存。
uni.clearStorageSync()
同步清理本地数据缓存。演示代码如下
templateview classcontentbutton clickremove删除key2/buttonbutton clickclear typewarn清除所有缓存/button/view
/templatescript setupuni.setStorageSync(key1,hello moto)uni.setStorageSync(key2,王二麻子)uni.setStorageSync(arrs,[one,two,three]);let myName uni.getStorageSync(key1)console.log(myName);const res uni.getStorageInfoSync();console.log(res);function remove(){uni.removeStorageSync(key2)}function clear(){uni.clearStorageSync()}
/scriptstyle scoped/style
效果
网络
uni.request发起网路请求3种回调结果调用
发起网络请求。
templateview class/view
/templatescript setupfunction request(){uni.request({url:https://jsonplaceholder.typicode.com/posts,success:res{console.log(res);}})}request();
/scriptstyle langscss scoped/style
请求成功 把结果渲染到前端页面
templateview classlayoutview classrow v-foritem in arrs :keyitem.idview classtitle{{item.title}}/viewview classcontent{{item.body}}/view/view/view
/templatescript setup
import { ref } from vue;let arrs ref([])function request(){uni.request({url:https://jsonplaceholder.typicode.com/posts,success:res{console.log(res);arrs.value res.data}})}request();
/scriptstyle langscss scoped.layout{padding: 30rpx;.row{border-bottom: 1px solid #cfcfcf;padding: 20rpx 0;.title{font-size: 36rpx;}.content{font-size: 28rpx;color: #666;}}}
/style
效果 写法2 function request(){uni.request({url:https://jsonplaceholder.typicode.com/posts,}).then(res{console.log(res);})}request();写法3
async function request(){let res await uni.request({url:https://jsonplaceholder.typicode.com/posts})console.log(res);}request();uni.request参数
data
请求的参数。
templateview class/view
/templatescript setupfunction request(){uni.request({url:https://jsonplaceholder.typicode.com/posts,data:{id:5,},}).then(res{console.log(res);})}request();/scriptstyle langscss scoped/style
method有效值
发送的类型也就是请求方式。 演示代码
templateview class/view
/templatescript setupfunction request(){uni.request({url:https://jsonplaceholder.typicode.com/posts,data:{id:5,},method:GET,}).then(res{console.log(res);})}request();/scriptstyle langscss scoped/style
header
设置请求的 headerheader 中不能设置 Referer。header也就是头部信息是带给我们后端的。
templateview class/view
/templatescript setupfunction request(){uni.request({url:https://jsonplaceholder.typicode.com/posts?id3,data:{id:5,},header:{token:asfsaf“content-type”:application/json},method:GET,}).then(res{console.log(res);})}request();/scriptstyle langscss scoped/style
timeout
超时时间单位为ms。我们定义一个fail如果超时了就会返回fail并提示“超时”这里超时时间设置为1秒再定义一个showLoading然后设置complete写入hideLoading也就是说无论成功失败showLoading都会隐藏代码如下
templateview class/view
/templatescript setupfunction request(){uni.showLoading()uni.request({url:https://jsonplaceholder.typicode.com/posts,data:{id:5},header:{token:adfadsfadsf,content-type:application/x-www-form-urlencoded},method:post,timeout:1000,success:res{console.log(res); },fail:err{console.log(超时);console.log(err);},complete:(){uni.hideLoading()}})}request();/scriptstyle langscss scoped/style
调慢网速测试fail: 开始测试
