https://www.cnblogs.com/fuckingPangzi/p/10462441.html
小程序的业务域名和服务器域名的区别
服务器域名是 wx.request 请求 去拉取数据的域名。 一般返回为JSON字符串
业务域名是小程序的webview组件要引入的其他H5地址的URL的域名或者网页里面的iframe的域名
如果需要跳过----网络请求域名----的校验，可勾选项目设置里的 “不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书” 选项。
点击工具栏上的预览按钮即可在真机上预览体验。在真机上如需跳过----网络请求域名----的校验，需要点击右上角选项，选择 “打开调试” 即可。
（1）index.html <head> <title><%= htmlWebpackPlugin.options.title %></title> </head> （2）router.js const routes = [ { path: '/', name: 'Index', component: () => import( /* webpackChunkName: "about" */ '../views/Index.vue'), meta: {title: '游戏活动'} } ] const router = new VueRouter({ routes }) router.beforeEach((to, from, next) => { /* 路由发生变化修改页面 title */ if (to.meta.title) { document.title = to.meta.title //给title赋值 } next() }) （3）main.js Vue.directive('title', {//单个修改标题 update: function (el) { document.title = el.getAttribute("data-title") //给title赋值 } }) （4）form.vue <template> <div class="page"> <div v-title :data-title="basicData.gameName" ></div> </div> </template>
八、移动端vant-ui相关
1、<input type="value">
（1）button，定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
（2）checkbox，定义复选框
（3）file，定义输入字段和 "浏览"按钮，供文件上传
（4）hidden，定义隐藏的输入字段
（5）image，定义图像形式的提交按钮
（6）password，定义密码字段，该字段中的字符被掩码
（7）radio，定义单选按钮
（8）reset，定义重置按钮，重置按钮会清除表单中的所有数据
（9）submit，定义提交按钮，提交按钮会把表单数据发送到服务器
（10）text，定义单行的输入字段，用户可在其中输入文本，默认宽度为 20 个字符
2、深度选择器
当 <style scoped>只作用于当前组件中的元素，可采用下列方式影响到子组件
（1）混用本地和全局样式
<style>/ * 全局样式 */
.wrap .child {
color: red;
}
</style>
<style scoped> /* 本地样式 */
</style>
（2） >>> 深度作用选择器（只作用于css）
<style scoped>
.wrap >>> .child {
color: red;
}
</style>
（3）deep
<style scoped>
.wrap /deep/ .child {
color: red;
}
</style>
3、移动端的长度单位
（1）%，相对于父元素的尺寸
（2）em，相对于父字体大小
（3）rem，相对于根字体大小
（4）vw，viewpoint width，视窗宽度，1vw等于视窗宽度的1%，如width: calc(100vw - 260px);font-size: 5vw;
（5）vh，viewpoint height，视窗高度，1vh等于视窗高度的1%，如height: calc(100vh - 260px);font-size: 5vh;
（6）vmin：vw和vh中较小的那个。做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 font-size: 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。
（7）vmax：vw和vh中较大的那个。vmin或vmax，是当前vw和vh中，较小或较大的那个，用vmin或vmax，使得文字大小在横竖屏下保持一致
附、媒体查询
@media screen and (min-width: 360px) and (max-width: 700px){
padding-left: 15%;
}
4、vant-ui之van-field
（1）Affix
（2）输入框，正常
（3）文本框，type="textarea"
（4）下拉框的逻辑
A、输入框禁用，右侧添加三角，
B、点击事件让下方气泡出现、传出序号、计算-从总数据中找出的相关数据-成下拉选项，
C、点击事件从自身数据中找出的相关数据-成为下拉选项，气泡出现
D、点击确定时，给对应的v-model赋值，气泡消失
（5）其它，用插槽input，
A、自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效
B、在Form组件进行表单校验时，会使用input插槽中子组件的value，而不是Field组件的value
（6）<van-uploader/>的部分属性
A、capture，图片选取模式，可选值为camera，直接调起摄像头
B、after-read，文件读取完成后的回调函数
C、before-read，文件读取前的回调函数，返回false可终止文件读取，支持返回Promise
5、插槽input示例
（1）html部分
<van-form @submit="beforeSubmit" ref="form" >
<template v-for="(item,idx) in formList" >
<div class="sign-form" :key="idx" v-if="item.inputType == 0">
<van-field name="name" :rules="[{ validator: valiFormData, message: '请输入正确内容',index:idx }]" show-word-limit
:label="item.topicName" v-model="formData[idx]" :placeholder="'请输入'+item.topicName" :maxlength="item.numLimit" />
</div>
<div class="sign-form" :key="idx" v-if="item.inputType == 1">
<van-field rows="4" :rules="[{ validator: valiFormData, message: '请输入正确内容',index:idx }]" autosize
v-model="formData[idx]" :label="item.topicName" type="textarea" show-word-limit/>
</div>
<div class="sign-form" :key="idx" v-if="item.inputType == 2">
<van-field :label="item.topicName" v-model="formData[idx]" right-icon="arrow-down" readonly placeholder="请选择"
:rules="[{ validator: valiFormData, message: '请输入正确内容',index:idx }]" @click="changeCol(idx)" />
</div>
<div class="sign-form" :key="idx" v-if="item.inputType == 3 && item.isCheckbox == 0">
<van-field :label="item.topicName" :rules="[{ validator: valiFormData, message: '请输入正确内容',index:idx }]" >
<template #input>
<van-radio-group v-model="formData[idx]" direction="horizontal" class="hor-style">
<van-radio v-for="(v,k) in JSON.parse(item.optionInfo)" :name="v.option" :key="k">{{v.option}}</van-radio>
</van-radio-group>
</template>
</van-field>
</div>
<div class="sign-form" :key="idx" v-if="item.inputType == 3 && item.isCheckbox == 1">
<van-field :label="item.topicName" :rules="[{ validator: valiFormData, message: '请输入正确内容',index:idx }]" >
<template #input>
<van-checkbox-group v-model="formData[idx]" :max="item.selectLimitMax ? item.selectLimitMax : 0" direction="horizontal">
<van-checkbox v-for="(value,key) in JSON.parse(item.optionInfo)" :name="value.option" shape="square" :key="key">{{value.option}}</van-checkbox>
</van-checkbox-group>
</template>
</van-field>
</div>
<div class="sign-form" :key="idx" v-if="item.inputType == 4">
<div class="van-form_card">
<div class="field__label">{{item.topicName}}</div>
<div class="field__desc">支持“图片”扩展名：png、gif、jpeg、pcx、psd、tiff</div>
</div>
<van-field name="name" type="hidden" :rules="[{ validator: valiFormData, message: '请输入正确内容',index:idx }]" v-model="formData[idx]" >
<template #input>
<div class="upload-preview">
<van-image v-if="formData[idx]" width="4rem" height="3rem" fit="contain" :src="formData[idx]" />
<van-uploader :before-read="uploadFile" accept="image/png,image/gif,image/jpeg,image/pcx,image/psd,image/tiff" :name="idx">
<van-icon name="plus"/>
</van-uploader>
</div>
</template>
</van-field>
</div>
<div class="sign-form" :key="idx" v-if="item.inputType == 5">
<div class="van-form_card">
<div class="field__label">{{item.topicName}}</div>
<div class="field__desc">支持“视频”扩展名：avi、MP4、rmvb</div>
</div>
<van-field name="name" type="hidden" :rules="[{ validator: valiFormData, message: '请输入正确内容',index:idx }]" v-model="formData[idx]">
<template #input >
<div class="flex-col">
<div class="video-upload" v-if="showUpload">
<span>视频上传中...</span>
<van-progress :show-pivot="false" :percentage="videoUploadPercent" />
</div>
<span class="link" v-if="formData[idx]" @click="href(idx)">{{videoName[idx]}}</span>
<van-uploader :before-read="uploadVideo" accept="*" v-if="!showUpload" :name="idx">
<van-button icon="plus" type="primary">上传视频</van-button>
</van-uploader>
</div>
</template>
</van-field>
</div>
<div class="sign-form" :key="idx" v-if="item.inputType == 6">
<div class="van-form_card">
<div class="field__label">{{item.topicName}}</div>
<div class="field__desc">支持“文件”扩展名：doc、docx、txt、pdf、pptx、ppt、xlsx、xls</div>
</div>
<van-field name="name" type="hidden" :rules="[{ validator: valiFormData, message: '请选择',index:idx }]" v-model="formData[idx]" >
<template #input >
<div class="flex-col">
<span class="link" v-if="formData[idx]" @click="href(idx)">{{formData[idx]}}</span>
<van-uploader :before-read="uploadFile" accept=".doc, .docx, .txt, .pdf, .pptx, .ppt, .xlsx, .xls" :name="idx">
<van-button icon="plus" type="primary">上传文档</van-button>
</van-uploader>
</div>
</template>
</van-field>
</div>
<div class="sign-form" :key="idx" v-if="item.inputType == 7">
<van-field readonly @click="clickDatePicker(idx)" name="name" :rules="[{ validator: valiFormData, message: '请选择日期',index:idx }]"
:label="item.topicName" v-model="formData[idx]" :placeholder="'请选择'+item.topicName" />
<van-popup v-model="showDatePicker" position="bottom">
<van-picker
show-toolbar
title="选择日期"
:columns="dateCol"
@cancel="showDatePicker = false"
@confirm="dateConfirm"/>
</van-popup>
</div>
</template>
<div class="vt-foot ">
<van-button :loading="loading" loading-text="保存中..." native-type="submit" block color="#fdb235">提交</van-button>
</div>
</van-form>
（2）js部分
A、上传图片
uploadFile(file,detail){
let formData=new FormData();
formData.append('file',file);
axios.post(this.$upload,formData,{
'Content-Type':'multipart/form-data'
}).then(res=>{
if(res.data && res.data.code === 10000){
this.formData[detail.name] = res.data.data;
let temp = res.data.data;
this.formData.splice(detail.name,1,temp);
}else{
this.$dialog.alert({
title: '提示',
message: '上传文件失败',
theme: 'round-button',
}).then(() => {
// on close
});
}
})
},
B、上传视频
uploadVideo(file,detail){
let type = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase()
if(this.videoType.indexOf(type) < 0 || file.type.indexOf("video") < 0){
this.$dialog.alert({
title: '提示',
message: '仅支持 .avi, .mp4, .rmvb, .mov 格式的视频',
theme: 'round-button',
});
return;
}
let max = 1024*1024*1024;
if(file.size > max){
this.$dialog.alert({
title: '提示',
message: '上传视频大小不能超过 1G!',
theme: 'round-button',
}).then(() => {});
return;
}
getALiYunOSSToken({
tokenName: "ios",
}).then(data=>{
let client = new OSS({
region: "oss-cn-beijing",
accessKeyId: data.data.data.accessKeyId,
accessKeySecret: data.data.data.accessKeySecret,
bucket: data.data.data.bucketName,
stsToken: data.data.data.securityToken,
});
const suffix = file.name.substr(file.name.indexOf("."));
let fileUrl = `test/${new Date().getTime()}${suffix}`;
client
.multipartUpload(fileUrl, file, {
progress: (p) => {
this.videoUploadPercent = Math.round(p * 100);
this.showUpload = true;
},
partSize: 102400,
})
.then((res) => {
this.showUpload = false;
this.videoName[detail.name] = res.name;
let url = res.res.requestUrls[0];
this.formData[detail.name] = url.substring(0,url.indexOf("?"));
let temp = this.formData[detail.name];
this.formData.splice(detail.name,1,temp);
})
.catch((err) => {
this.showUpload = false;
console.log(err);
this.$dialog.alert({
title: '提示',
message: '上传失败',
theme: 'round-button',})
});
})
},
标签：草稿,idx,formData,item,17,移动,data,class,name
From： https://www.cnblogs.com/gushixianqiancheng/p/17279737.html