有一定HTML,CSS,vue基础,记录方便自己记忆学习,自己觉得很经常用不会错的就没记
文件-新建-项目
工具-安装插件
编译成微信小程序段代码
设置开发者路径,安装微信开发者工具目录
开启服务端口,微信开发者工具中开启
设置-通用设置-安全
├─pages 业务页面文件存放的目录
│ └─index
│ └─index.vue index页面
├─static 存放应用引用的本地静态资源的目录(注意：静态资源只能存放于此)
├─unpackage 非工程代码，一般存放运行或发行的编译结果
├─index.html H5端页面
├─main.js Vue初始化入口文件
├─App.vue 配置App全局样式、监听应用生命周期
├─pages.json 配置页面路由、导航栏、tabBar等页面类信息
├─manifest.json 配置appid、应用名称、logo、版本等打包信息
└─uni.scss uni-app内置的常用样式变量
如何查看小程序APPID
登录小程序平台【mp.weixin.qq】->开发->开发设置->开发者ID，即可查到AppID。如下图：
在manifest.json中微信小程序配置ID,就可以在手机查看了
uni-app 项目每个页面是一个 .vue 文件，数据绑定及事件处理同 Vue.js 规范：
属性绑定 src="{ { url }}" 升级成 :src="url"
事件绑定 bindtap="eventName" 升级成 @tap="eventName"，支持（）传参
支持 Vue 常用指令 v-for、v-if、v-show、v-model 等
调用接口能力，建议前缀 wx 替换为 uni ，养成好习惯，支持多端开发。
<style> 页面样式不需要写 scoped，小程序是多页面应用，页面样式自动隔离。
生命周期分三部分：应用生命周期(小程序)，页面生命周期(小程序)，组件生命周期(Vue)
根节点为
<template>，这个<template>下只能且必须有一个根<view>组件。
<template>//页面布局<view></view>
</template><script>//逻辑代码export default {//data：template模板中需要使用的数据data() {return {}},methods:{//methods方法，如按钮点击、屏幕滚动}}
</script><style lang="scss">//CSS渲染</style>
<template>里面写页面布局,相当于写HTML
<view>个人感觉与HTML的<div十>分类似
{"pages": [ // 'pages' 数组中的第一项表示应用的启动页面。参考：{"path": "pages/index/index","style": {"navigationBarTitleText": "首页" // 导航栏标题文本}},{"path": "pages/my/my","style": {"navigationBarTitleText": "我的"}}],"globalStyle": {"navigationBarTextStyle": "white", // 全局设置以将导航栏标题字体颜色更改为'black'或'white'"navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#26BB9B", // 全局设置以更改导航栏标题背景颜色"backgroundColor": "#F8F8F8"},"tabBar": {"selectedColor": "#26BB9B","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "static/tabs/home_default.png","selectedIconPath": "static/tabs/home_selected.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "static/tabs/user_default.png","selectedIconPath": "static/tabs/user_selected.png"}]},"condition": { // 模式配置，仅在开发期间生效"current": 0, // 当前激活的模式（在'list'数组中的索引）"list": [{"name": "searchCity", // 模式名称"path": "pages/index/index", // 启动页面（您要调试的页面） - 必填"query": "name=searchCity" // 启动参数，在页面的onLoad函数里面得到。}]},"uniIdRouter": {}
}启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。
属性说明：
| 属性 | 类型 | 是否必填 | 描述 |
| current | Number | 是 | 当前激活的模式，list节点的索引值 |
| list | Array | 是 | 启动模式列表 |
list说明：
| 属性 | 类型 | 是否必填 | 描述 |
| name | String | 是 | 启动模式名称 |
| path | String | 是 | 启动页面路径 |
| query | String | 否 | 启动参数，可在页面的 onLoad 函数里获得 |
注意： 在 App 里真机运行可直接打开配置的页面，微信开发者工具里需要手动改变编译模式，如下图：
不记得属性可以把鼠标悬停在标签可以出现官网链接直接抵达
<template><swiper class="banner" indicator-dots circular autoplay ><swiper-item v-for="item in Pictures" :key="item.id"><image @tap="onPoviewImage(item.url)" :src="item.url" ></image></swiper-item></swiper>
</template><script>export default {data() {return {title: 'Hello',//轮播图数据Pictures:[{id:'1',url:"../../static/img/xixi1.jpg"},{id:'2',url:"../../static/img/xixi2.jpg"},{id:'3',url:"../../static/img/xixi3.jpg"}]}},methods: {onPoviewImage(url){// console.log(url)uni.previewImage({urls:this.Pictures.map(v=>v.url),current:url})}}}
</script><style lang="scss">.banner{width: 750rpx;}
</style>
# 通过 git 从 gitee 克隆下载 git clone -b vite-ts .git
常见问题
运行 npx 命令下载失败，请尝试换成手机热点重试
换手机热点依旧失败，请尝试从国内备用地址下载
在 manifest.json 文件添加 小程序 AppID 用于真机预览
运行 npx 命令需依赖 NodeJS 环境，Node.js
>测试安装是否成功，按下【win+R】键，输入cmd，打开cmd窗口
输入：node -v // 显示node.js版本
npm -v // 显示npm版本
>显示版本说明安装成功
环境配置找到安装位置新建两个文件夹node_global和node_cache
>创建完毕后，使用管理员身份打开cmd命令窗口
npm config set prefix "路径node_global"
npm config set prefix D: node.jsnode global
npm config set cache "路径node cache"
npm config set cache D: node.jsnode cache
配置环境变量
此电脑-单击右键-属性-高级系统设置-环境变量
点击新建
变量名:NODE_PATH
变量值为:node_global路径node_modules
D:node.jsnode_globalnode_modules
在node_global下加一个文件夹node_modules
编辑用户变量中的Path编辑,将node_global路径放在AppDataRoamingnpm上面
然后在系统变量Path编辑添加%NODE_PATH%
或者系统变量Path编辑添加;%NODE_PATH%
测试是否安装成功
npm install express -g//(管理员命令)出现以下说明成功下载安装pnpm(pnpm比npm快)
npm install express -g pnpm
刷新环境变量 新开cmd，输入命令提示符
set PATH=C: (刷新环境变量)必须关闭这个cmd，再新开个cmd，输入
echo %PATH%(重新读取path的配置文件)此时再直接输入pnpm-v即可成功
运行 git 命令需依赖 Git 环境，Git 下载地址
下载依赖包下方打开命令行终端
安装依赖 pnpm install(管理员身份运行否则报错)
右键HBuilderX管理员身份运行,开启终端之后会多一个node_modules文件夹
编译成微信小程序 pnpm dev:mp-weixin会多一个dist文件夹
导入微信开发者工具
提示
编译成 H5 端可运行 pnpm dev:h5 通过浏览器预览项目。
HbuilderX对TS类型支持暂不完善
VSCode对TS 类型支持友好，熟悉的编辑器
项目采用 Vue3 + TS 开发 uni-app 项目，所以需要分别安装 Vue3 + TS 插件 和 uni-app 插件。
注意事项
没开发过 Vue3 + TS 项目的小伙伴注意，需要先安装 Vue3 和 TS 的插件，并完成以下配置 👇
安装 Vue Language Features (Volar) ：Vue3 语法提示插件
安装 TypeScript Vue Plugin (Volar) ：Vue3 的 TS 插件
工作区禁用 Vetur 插件(Vue2 插件和 Vue3 插件冲突)
工作区禁用 @builtin typescript 插件（禁用后自动开启 Vue3 的 TS 托管模式）
查看 Vue3 官方文档
需禁用的插件
👉 安装 uni-app 开发插件
uni-create-view ：快速创建 uni-app 页面,要进入改设置,否则只创建.vue
uni-helper ：uni-app 代码提示,Ctrl+I可以唤醒代码提示
uniapp 小程序扩展 ：鼠标悬停查文档,出现属性官方文档可以直接到不懂的,不用一个一个找
不设置uni-create-view不会有my的同名文件夹
👉 TS 类型校验
管理员身份快捷图标右键,打开vscode用Ctrl+`打开命令行终端
安装 类型声明文件 pnpm i -D miniprogram-api-typings @uni-helper/uni-app-types
package.json中代码
"devDependencies": {"@dcloudio/types": "^3.3.2","@dcloudio/uni-automator": "3.0.0-3080720230703001","@dcloudio/uni-cli-shared": "3.0.0-3080720230703001","@dcloudio/uni-stacktracey": "3.0.0-3080720230703001","@dcloudio/vite-plugin-uni": "3.0.0-3080720230703001","@uni-helper/uni-app-types": "^0.5.12","@vue/tsconfig": "^0.1.3","miniprogram-api-typings": "^3.12.1","typescript": "^4.9.4","vite": "4.0.4","vue-tsc": "^1.0.24"}管理员身份打开Windows PowerShell输入,最后选y,(如果进入终端后报错pnpm不能在系统运行)
配置 tsconfig.json
// 类型声明文件"types": ["@dcloudio/types", // uni-app API 类型"miniprogram-api-typings", // 原生微信小程序类型"@uni-helper/uni-app-types" // uni-app 组件类型]},"vueCompilerOptions": {// 原配置 `experimentalRuntimeMode` 现调整为 `nativeTags`"nativeTags": ["block", "component", "template", "slot"]// "experimentalRuntimeMode": "runtime-uni-app" },"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}👉 JSON 注释问题
设置文件关联，把 manifest.json 和 pages.json 设置为 jsonc
其他json不能写注释
目前支持的选择器有：
| 选择器 | 样例 | 样例描述 |
|---|---|---|
| .class | .intro | 选择所有拥有 class="intro" 的组件 |
| #id | #firstname | 选择拥有 id="firstname" 的组件 |
| element | view | 选择所有 view 组件 |
| element, element | view, checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
| ::after | view::after | 在 view 组件后边插入内容，仅 vue 页面生效 |
| ::before | view::before | 在 view 组件前边插入内容，仅 vue 页面生效 |
注意：
在 uni-app 中不能使用 * 选择器。
微信小程序自定义组件中仅支持 class 选择器
uni-app 支持的通用 css 单位包括 px、rpx
nvue 还不支持百分比单位。
App 端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。
注意此时不支持 rpx
<template><view><view class="box" :style="{background:bgcolor}" @click="clickbg"></view></view>
</template><script>export default {data() {return {bgcolor:"#c00"};},methods:{clickbg(){let color = "#"+String(Math.random()).substr(3,6)//随机色的值console.log(color)this.bgcolor = color}}}
</script><style lang="scss">.box{width: 100rpx;height: 100rpx;background: #167;
}
</style>可以传给 v-bind:class 一个对象，实现动态地切换 class。
也可以在对象中传入更多字段来动态切换多个 class。
:class指令也可以与普通的 class 共存。
v-if和v-else
中间不允许加除空格回车以外的,可加v-else-if
v-if 和 v-show 区别
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。相比之下，
v-show就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换，来控制元素的显示和隐藏。v-for
v-for 指令可以实现基于一个数组来渲染一个列表。
v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。
- 第一个参数
item则是被迭代的数组元素的别名。- 第二个参数，即当前项的索引
index，是可选的。- :key="index"(index唯一)
v-bind
动态地绑定一个或多个属性
- v-bind缩写为":"
v-html
支持HTML标签渲染
v-on
v-on 指令，它用于监听 DOM 事件。v-on缩写为‘ @ ’
在uni-app工程根目录下的 components 目录，创建并存放自定义组件：
项目-右键新建目录components-新建组件可以自定义组件名称
一个名为pubTitle的自定义组件
<template><view class="pubTitle"><view class="time">{{time}}</view><view class="big">{{title}}</view><view class="small">{{smalltile}}</view><view class="list">{{list}}</view><view class="user">{{user}}</view><view class="line"></view></view>
</template><script>export default {name:"pubTitle",// props:["title","smalltile"],props:{title:{type:String,default:"默认标题"},smalltile:{type:String,default:"默认副标题"},time:{type:Number,w()},list:{type:Array,default(){return [1,2,3]}},user:{type:Object,default(){return {name:"匿名",gender:"保密"}}}},data() {return {};}}
</script><style lang="scss">
.pubTitle{padding: 30rpx 30rpx;text-align: center;background: #e9f1f6;.big{font-size: 50rpx;font-weight: 600;color: #333;}.small{font-size: 28rpx;font-weight: 400;color: #888;}.line{display: inline-block;width: 80rpx;height: 10rpx;border-radius: 20%;background: #289;}
}
</style>pages中的部分代码
<template><view><pubTitle title = "消息" smalltile = "来消息了"></pubTitle></view>
</template>
//这样自定义组件就引入了自定义组件效果
当一个子组件改变了一个
prop的值时，这个变化也会同步到父组件中所绑定。
//父组件
<template><view><mytitle title="消息" titles="消息通知"></mytitle><button @click="onclickbtn">开启{{state}}</button><myitem :state = "state" @stateEvt="onstateEvt"></myitem><!-- <mypop :state.sync="state"></mypop>:state.sync = @update:state 标识符 相当于v-model--></view>
</template><script>export default {data() {return {state:false};},methods:{onclickbtn(){//改变父组件开启state状态this.state = true},onstateEvt(e){//接收来自子组件的值console.log(e)this.state = e}}}
</script><style lang="scss">
</style>//子组件
<template><view class="myitem"><view>---弹出框样式---</view><view class="box" :style="{height:state?'300rpx':'0'}"></view><button size="mini" @click="onclose">关闭</button></view>
</template><script>export default {name:"myitem",data() {return {};},props:{state:{//子组件接收父组件的statetype:Boolean,default:false}},methods:{onclose(){//子组件props不能直接修改父组件的值this.$emit("stateEvt",false)//点击关闭,将false值传给父组件// this.$emit("update:state",false)子组件可以通过自定义事件修改父组件数据}}}
</script><style lang="scss">
.box{width: 300rpx;height: 300rpx;background: #00FFFF;
}
</style>//直接放在一个自定义组件方便看
<template><view class="gundong"><swiper class="swi" indicator-dots indicator-color="#e9f1f6" indicator-active-color="#00BFFF" circular autoplay>
//indicator-dots 是否显示面板指示点
//indicator-color 指示点颜色
//indicator-active-color 选中指示点颜色
//circular 相当于可以循环滚动 autoplay 自动轮播切换<swiper-item v-for="item in Images" :key="item.id"><image @tap="on(item.url)" :src="item.url"></image></swiper-item></swiper></view>
</template><script>export default {name:"gundong",data() {return {Images:[{ id: "1", url: "../../static/xixi1.jpg" },{ id: "2", url: "../../static/xixi2.jpg" },{ id: "3", url: "../../static/xixi3.jpg" }]};},methods:{on(url){uni.previewImage({urls:this.Images.map(v=>v.url),current:url,count:url})}}}
</script><style lang="scss">
.swi{image{width: 750rpx;height: 500rpx;}
}
</style>创建了一个名为 "gundong" 的组件，其中包含一个轮播图（swiper）和一些图片。
在模板中，使用了 v-for 指令来遍历 Images 数组，并为每个图像创建一个 swiper-item。
使用了 @tap 事件监听器来绑定点击事件，并调用 on 方法来预览图像。
在脚本部分，定义了名为 "Images" 的数组，其中包含三个图像对象。
on 方法使用 uni.previewImage 方法来预览图像，传递了需要预览的图像链接列表和当前点击的图像链接。
使用了 SCSS 编写样式规则，设置了轮播图的宽度和高度。
这段代码的作用是在页面上展示一个包含轮播图的滚动视图，并实现了点击图像预览的功能。
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
| 参数 | 类型 | 必填 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|---|
| url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数 | ||
| animationType | String | 否 | pop-in | 窗口显示的动画效果，详见：窗口动画 | App（uni-app x 不支持） |
| animationDuration | Number | 否 | 300 | 窗口动画持续时间，单位为 ms | App（uni-app x 不支持） |
| events | Object | 否 | 页面间通信接口，用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。 | ||
| success | Function | 否 | 接口调用成功的回调函数 | ||
| fail | Function | 否 | 接口调用失败的回调函数 | ||
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
关闭当前页面，跳转到应用内的某个页面。
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2' |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
关闭所有页面，打开到应用内的某个页面。
注意： 如果调用了 uni.preloadPage 不会关闭，仅触发生命周期 onHide
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| url | String | 是 | 需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，如果跳转的页面路径是 tabBar 页面则不能带参数 |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
注意： 如果调用了 uni.preloadPage 不会关闭，仅触发生命周期 onHide
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| url | String | 是 | 需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数 |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
<template><view><navigator url = "/pages/dome/dome">跳转dome</navigator><!-- 跳转到当前页面 --><view class="oo" @click="godome"></view></view>
</template><script>export default {data() {return {}},methods:{godome(){uni.navigateTo({//不关闭当前页面，跳转到应用内的某个页面。url:"/pages/dome/dome",//跳转到到当前页面success:res=>{console.log(res)//跳转成功}})// directTo({//关闭当前页面，跳转到应用内的某个页面。// url:"/pages/dome/dome",//跳转到到当前页面// success:res=>{// console.log(res)//跳转成功// }// })// Launch({//关闭所有页面，打开到应用内的某个页面。可以跳转导航// url:"/pages/my/my",//跳转到到当前页面,路径后可以带参数。跳转的页面路径是 tabBar 页面则不能带参数// success:res=>{// console.log(res)//跳转成功// }// })}}}
</script><style lang="scss">.oo{width: 750rpx;height: 500rpx;background: #068;}
</style>
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
| 参数 | 类型 | 必填 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|---|
| delta | Number | 否 | 1 | 返回的页面数，如果 delta 大于现有页面数，则返回到首页。 | |
| animationType | String | 否 | pop-out | 窗口关闭的动画效果，详见：窗口动画 | App（uni-app x 不支持） |
| animationDuration | Number | 否 | 300 | 窗口关闭动画的持续时间，单位为 ms | App（uni-app x 不支持） |
| success | Function | 否 | 接口调用成功的回调函数 | ||
| fail | Function | 否 | 接口调用失败的回调函数 | ||
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
<template><view><image src="../../static/xx.jpg" mode=""></image><view @click="goback"><返回上一页</view></view>
</template><script>export default {data() {return {};},methods:{goback(){//关闭当前页面，返回上一页面或多级页面。uni.navigateBack()}}}
</script><style lang="scss"></style>route不支持小程序
onLoad支持小程序
显示消息提示框。
| 参数 | 类型 | 必填 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| title | String | 是 | 提示的内容，长度与 icon 取值有关。 | |
| icon | String | 否 | 图标，有效值详见下方说明，默认：success。 | |
| image | String | 否 | 自定义图标的本地路径（app端暂不支持gif） | App、H5、微信小程序、百度小程序、抖音小程序（2.62.0+） |
| mask | Boolean | 否 | 是否显示透明蒙层，防止触摸穿透，默认：false | App、微信小程序、抖音小程序（2.47.0+） |
| duration | Number | 否 | 提示的延迟时间，单位毫秒，默认：1500 | |
| position | String | 否 | 纯文本轻提示显示位置，填写有效值后只有 title 属性生效，且不支持通过 uni.hideToast 隐藏。有效值详见下方说明。 | App |
| success | Function | 否 | 接口调用成功的回调函数 | |
| fail | Function | 否 | 接口调用失败的回调函数 | |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
icon 值说明
| 值 | 说明 | 平台差异说明 |
|---|---|---|
| success | 显示成功图标，此时 title 文本在小程序平台最多显示 7 个汉字长度，App仅支持单行显示。 | 支付宝小程序无长度无限制 |
| error | 显示错误图标，此时 title 文本在小程序平台最多显示 7 个汉字长度，App仅支持单行显示。 | 支付宝小程序、快手小程序、抖音小程序、百度小程序、京东小程序、QQ小程序不支持 |
| fail | 显示错误图标，此时 title 文本无长度显示。 | 支付宝小程序、抖音小程序 |
| exception | 显示异常图标。此时 title 文本无长度显示。 | 支付宝小程序 |
| loading | 显示加载图标，此时 title 文本在小程序平台最多显示 7 个汉字长度。 | 支付宝小程序不支持 |
| none | 不显示图标，此时 title 文本在小程序最多可显示两行。 |
<template><view class="content"><image class="logo" src="/static/logo.png" @click="clickimg"></image><view class="text-area"><text class="title">{{title}}</text></view><view><navigator url="/pages/my/my">跳转my</navigator></view></view>
</template><script>export default {data() {return {title: 'Hello'}},onLoad() {},methods: {clickimg(){//显示消息提示框。uni.showToast({title:"发布失败",//提示的内容，长度与 icon 取值有关。icon:"none",//图标，默认：success。none没有图标// image:"/static/logo.png",//自定义图标的本地路径（app端暂不支持gif）mask:true,//是否显示透明蒙层，防止触摸穿透，默认：false// duration:500//提示的延迟时间，单位毫秒，默认：1500})setTimeout(()=>{//定时器uni.navigateTo({url:"/pages/my/my"})},1500)//显示之后再跳转走}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>
本文发布于:2024-01-31 07:46:22，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170665838726823.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
