网站怎么防k企业网站开发与管理

当前位置： 首页 > news >正文

网站怎么防k,企业网站开发与管理,wordpress 重写规则,电子商务网站策划方案uniapp的内容和vue网页开发会有很多区别#xff0c;但是都是基于vue开发的#xff0c;大多数业务还是在vue打交道#xff0c;但是这些uniapp的特殊的知识点也是要掌握好的。 基本配置 创建uniapp项目 npx degit dcloudio/uni-preset-vue#vite-ts 项目名 #xff1a;用于…uniapp的内容和vue网页开发会有很多区别但是都是基于vue开发的大多数业务还是在vue打交道但是这些uniapp的特殊的知识点也是要掌握好的。 基本配置 创建uniapp项目 npx degit dcloudio/uni-preset-vue#vite-ts 项目名 用于创建一个uniapp项目 npm run dev:mp-weixin 用于给项目打包成微信小程序的打包格式接着直接将dist中相应的包导入到相应的微信开发者工具里面即可。 加上ts类型校验npm i -D types/wechat-miniprogram uni-helper/uni-app-types ts类型校验 接着在tsconfig.json配置文件中配置好这个类型校验 {extends: vue/tsconfig/tsconfig.json,compilerOptions: {sourceMap: true,baseUrl: .,paths: {/: [./src/]},lib: [esnext, dom],types: [dcloudio/types,types/wechat-miniprogram,//加上uni-helper/uni-app-types]//加上},include: [src//*.ts, src//.d.ts, src/**/.tsx, src/*/.vue] }uni-ui的支持 安装uni-helper/uni-ui-types npm i -D uni-helper/ui-types 再把uni-helper/uni-ui-types加上以上的type配置项中去。 types: [dcloudio/types,types/wechat-miniprogram,//加上uni-helper/uni-app-types,uni-helper/uni-ui-types]//加上}, pinia配置 持久化配置要先下载pinia持久化插件 npm i pinia-plugin-persistedstate 插件默认使用 localStorage 实现持久化小程序端不兼容需要替换持久化 API。 store下的index.ts import { createPinia } from pinia import persist from pinia-plugin-persistedstate// 创建 pinia 实例 const pinia createPinia() // 使用持久化存储插件 pinia.use(persist)// 默认导出给 main.ts 使用 export default pinia// 模块统一导出 export * from ./modules/member main.ts import { createSSRApp } from vue; import App from ./App.vue; import pinia from ./stores export function createApp() {const app createSSRApp(App);app.use(pinia)return {app,}; } 要多端配置持久化要在相应的store的ts文件中配置持久化规则 小程序端配置持久化persist要专门配置下getItem和setItem在defineStore中配置此参数 // TODO: 持久化persist: {storage:{getItem(key){return uni.getStorageSync(key)},setItem(key,value){uni.setStorageSync(key,value)}}}封装promise请求函数和请求过滤器 import { useMemberStore } from /stores/modules/member import { BaseRequestUrl } from ./properties const baseURL BaseRequestUrl//添加拦截器 const httpInterceptor {invoke(option:UniApp.RequestOptions){//非http开头的请求需要拼接地址if(!option.url.startsWith(http)){option.url baseURL option.url}//请求超时默认是六十秒option.timeout 30000console.log(option)//添加小程序请求头标识option.header {…option.header, //如果有原来的请求头保留原来的请求头后再加上小程序请求头source-client:miniapp}//添加token请求头标识const memberStore useMemberStore()const token memberStore.profile?.tokenif(token){option.header.Authorization token}} } uni.addInterceptor(request,httpInterceptor) uni.addInterceptor(uploadFile,httpInterceptor)interface DataT{code:string,message:string,data:T }export const sendRequest T(option:UniApp.RequestOptions) { //指定泛型该泛型是有效数据的类型return new PromiseDataT((resolve,reject) { uni.request({…option,success(res){if(res.statusCode 200 res.statusCode 300){ //如果是2xx说明是resolve(res.data as DataT) //后端响应过来的有效数据}else if(res.statusCode 401){// 401错误 -》 清理用户信息跳转到登录页const memberStore useMemberStore()memberStore.clearProfile()uni.navigateTo({url:/pages/login/login})reject(res)}else{//其他错误 -》 根据后端错误信息轻提示uni.showToast({icon:none,title:(res.data as DataT).message || 请求错误})}},fail(err){ //响应失败一般是网络问题uni.showToast({icon:none,title:网络错误})reject(err)}})}) } 其实就是小程序端使用uni.request来发送请求自定义了一个promise内部使用了uni.request函数用于发送请求。uni.request返回的数据中是属于后端返回的数据的是res中的data所以要返回的就是res.data。Data接口是后端返回的数据类型的格式。token的信息也封装在其中登录后获取token之后token信息会储存在pinia中每次发送请求的时候token会自动被读取到请求头中。 baseUrl是服务器的url地址或者微服务网关的url地址。 关于pages.json 在uniapp中每个页面都是要注册在pages.json文件中。 在pages.json中配置页面的路由地址及窗口表现、默认窗口表现、tarbar 代码案例 {pages: [ //pages数组中第一项表示应用启动页参考https://uniapp.dcloud.io/collocation/pages{path: pages/index/index,//可以在此处修改一些小程序的页面信息style: {navigationBarTitleText: 首页}},{path : pages/my/my,style : {navigationBarTitleText : 我的}}],globalStyle: {navigationBarTextStyle: black,navigationBarTitleText: uni-app,navigationBarBackgroundColor: #2ff8d0,backgroundColor: #F8F8F8},tabBar: {selectedColor: #2ff8d0,//tarbar选中的时候的文字的颜色指定list: [{pagePath: pages/index/index,//tabar的路由text: 首页,//tabar下方的文字iconPath: static/tabs/home_default.png,//tabar的图标selectedIconPath: static/tabs/home_selected.png//tabar被选中的时图标},{pagePath: pages/my/my,text: 我的,iconPath: static/tabs/user_default.png,selectedIconPath: static/tabs/user_selected.png}]}, } pages参数 pages参数是一个数组数组中的元素就是一个一个的页面的信息数组中的第一个元素代表的页面就是应用首页。 path就是页面的路由地址之后关于路由跳转页面的时候都是使用这个配置的路由地址。 style是页面的一些窗口表现配置。style用于设置每个页面的状态栏、导航条、标题、窗口背景色等。在pages参数外还有一个参数叫globalStyle用于配置全局窗口表现每个页面的实际的窗口表现会先找style如果没有的话再找globalStyle。 常见的样式如下 属性类型默认值描述navigationBarBackgroundColorHexColor#F8F8F8导航栏背景颜色同状态栏背景色navigationBarTextStyleStringblack导航栏标题颜色及状态栏前景颜色仅支持 black/whitenavigationBarTitleTextString导航栏标题文字内容navigationStyleStringdefault导航栏样式仅支持 default/custom。custom即取消默认的原生导航栏backgroundColorHexColor#ffffff窗口的背景色 至于具体的样式见 pages.json 页面路由 | uni-app官网 tarbar tarbar是用于配置一级导航栏即底部的那个导航栏。 常用配置属性 属性类型必填默认值描述colorHexColor是tab 上的文字默认颜色selectedColorHexColor是tab 上的文字选中时的颜色backgroundColorHexColor是tab 的背景色listArray是tab 的列表详见 list 属性说明最少2个、最多5个 tabpositionString否bottom可选值 bottom、top用于控制一级导航栏是显示在底部还是顶部 tarbar参数中的list数组是一级导航栏里面的tab导航的信息的数组tar导航的顺序和数组中的一致tarbar最多配置五个tab最少配置两个tab。 tab的配置属性 属性类型必填说明pagePathString是页面路径必须在 pages 中先定义textString是tab 上按钮文字在 App 和 H5 平台为非必填。例如中间可放一个没有文字的号图标iconPathString否图片路径icon 大小限制为40kb建议尺寸为 81px * 81px当 position 为 top 时此参数无效不支持网络图片不支持字体图标selectedIconPathString否选中时的图片路径icon 大小限制为40kb建议尺寸为 81px * 81px 当 position 为 top 时此参数无效visibleBoolean否该项是否显示默认显示iconfontObject否字体图标优先级高于 iconPath 具体参数信息见官网文档pages.json 页面路由 | uni-app官网 分包 pages.json中还可以进行分包配置分包可以让一些页面和主要的页面分开下载即进入程序的时候会默认下载主包中的页面信息而分包中的信息在进入指定页面的时候此分包才会开始下载页面信息如此可以大大优化小程序的下载和启动速度。 分包中的页面不要放在src下的pages目录中要自定义一个和pages目录同级的新目录代表一个分包将分包页面放在此分包的目录中。 例若有个分包叫pagesMember此分包下有两个页面settings.vueprofile.vue {//组件自动导入的规则easycom: {//是否开启自动扫描autoscan: true,//以正则的方式自定义组件匹配规则custom: {// uni-ui 规则如下配置^uni-(.*): dcloudio/uni-ui/lib/uni-\(1/uni-\)1.vue}},pages: [//pages数组中第一项表示应用启动页参考https://uniapp.dcloud.io/collocation/pages{path: pages/index/index,style: {navigationStyle: custom, //隐藏默认导航栏navigationBarTitleText: 首页}},{path: pages/my/my,style: {navigationStyle: custom,navigationBarTextStyle: white,navigationBarTitleText: 我的}}],globalStyle: {navigationBarTextStyle: black,navigationBarTitleText: ,navigationBarBackgroundColor: #F8F8F8,backgroundColor: #F8F8F8},// 设置 TabBartabBar: {color: #333,selectedColor: #27ba9b,backgroundColor: #fff,borderStyle: white,list: [{text: 首页,pagePath: pages/index/index,iconPath: static/tabs/home_default.png,selectedIconPath: static/tabs/home_selected.png}{text: 我的,pagePath: pages/my/my,iconPath: static/tabs/user_default.png,selectedIconPath: static/tabs/user_selected.png}]},//分包信息配置subPackages: [{root: pagesMember,pages: [{path: settings/settings,style: {navigationBarTitleText: 设置}},{path: profile/profile,style: {navigationStyle: custom,navigationBarTextStyle: white,navigationBarTitleText: 个人信息详情页面}}]}],//分包预下载规则preloadRule: {pages/my/my: {network: all, packages: [pagesMember] }} } subPackages中root是此分包中页面的的根目录也就是以上自定义的那个pagesMember目录。 preloadRule就是指定进入了哪个页面的时候会下载哪个分包。参数名就是触发下载的页面的路径参数值中的network是代表在什么网络环境下下载分包packages是指定要加载哪些分包。 具体使用见pages.json 页面路由 | uni-app官网 常用api api比较多我列举几个我觉得看了有用的api。例如上传文件、选择媒体资源上传到服务器、页面路由跳转、弹出窗口提示等。 uni.uploadFile() 此方法用于将文件数据上传到服务器中请求方式是post其中 content-type 为 multipart/form-data。 参数名类型必填说明urlString是开发者服务器 urlfileTypeString见平台差异说明文件类型image/video/audiofileFile否要上传的文件对象。filePathString是files和filePath选其一要上传文件资源的路径。nameString是文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容headerObject否HTTP 请求 Header, header 中不能设置 Referer。timeoutNumber否超时时间单位 msformDataObject否HTTP 请求中其他额外的 form datasuccessFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行 uni.uploadFile({url: https://www.example.com/upload, //仅为示例非真实的接口地址filePath: tempFilePaths[0],name: file,formData: {userInfo: userinfo.value},success: (uploadFileRes) {console.log(uploadFileRes.data);}}); 其中一定要注意的是formData参数的参数值会变成一个json字符串请求给后端后端可以在controller的方法的参数列表上添加一个String的参数在其前面的RequestParam注解中加上指定在formData中设置的key的名称这个参数上就会接受到指定的formData中的相应的参数信息。 PostMapping(value/upload)public ResultDataRoleContentPo voiceMsgSend(RequestParam(userInfo) String str, RequestParam(file) MultipartFile file){UserInfo userInfo JSONObject.parseObject(str,UserInfo.class);//其他操作 } 关于下载文件没什么要特殊说明的见文档uni.uploadFile(OBJECT) | uni-app官网 uni.chooseMedia() 用于用户从自己的相册中选择图片或者启动拍照功能获取图片。 参数名类型默认值必填说明countNumber9注意ios不可大于9否最多可以选择的文件个数mediaTypeArray.string[image, video]否文件类型sourceTypeArray.string[album, camera]否图片和视频选择的来源maxDurationNumber10否拍摄视频最长拍摄时间单位秒。时间范围为 3s 至 30s 之间sizeTypeArray.string[original, compressed]否仅对 mediaType 为 image 时有效是否压缩所选文件cameraStringback否仅在 sourceType 为 camera 时生效使用前置或后置摄像头successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数调用成功、失败都会执行 代码案例 uni.chooseMedia({count: 9,mediaType: [image,video],sourceType: [album, camera],maxDuration: 30,camera: back,success(res) {console.log(res.tempFiles)} }) res.tempFiles是选择的图片/视频的临时文件的路径的数组其中的元素就是一个个临时文件的路径。 路由跳转 uni.navigateTo() 保留原有页面跳转到指定的页面。要跳转到原来的页面使用uni.navigateBack()即可跳回原来的页面。 参数类型必填说明urlString是需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔参数键与参数值用相连不同参数用分隔如 path?keyvaluekey2value2path为下一个页面的路径下一个页面的onLoad函数可得到传递的参数successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行 uni.navigateTo({url: /pages/login/login?id1nameuniapp }); 路由路径后面带的参数可以被下个页面的onLoad函数的参数中获取当然也会作为query参数传递。 uni.redirectTo() 和uni.navigate使用方法一致区别是uni.redirectTo()是关闭当前页面跳转到指定页面类似一个替换的效果。 uni.reLaunch() 使用也是和以上两个一致区别是它使用后会关闭此前的所有的页面跳转到指定页面。 uni.switchTab() 以上的四个api都是只能用于打开非tab页面要想打开tab页面要使用uni.switchTab使用方法和以上四个是一致的。只是页面路径要是tab页面。并且使用了该方法后会关闭所有的非tab页面。 uni.navigateBack() 用于回退到之前的页面。 参数类型必填默认值说明deltaNumber否1返回的页面数如果 delta 大于现有页面数则返回到首页。successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行 当然更多的知识点和使用方法在官网文档中才是最详细的uniapp官网uni-app官网