开发笔记 第22页

来源： uni-app发布 h5 与ASP .NET MVC 后台 发布 到 IIS的同一端口 并配置跨域_uniapp发布h5部署iis-CSDN博客

iis 安装URL重写

选择对应的后台项目，进行url重写

编辑【模式】部分的内容的重写规则，我这里是h5中请求的前缀是api，大家可以根据自己的前缀进行修改。
编写【操作类型】为重写，并写重写url，按照图中设置即可。

uni-app web发布配置

来源： uni-app项目打包成H5部署到服务器(超详细步骤)_uni-app unpackage-CSDN博客

咳咳, 第一次写博客, 有点激动, 昨天get了一个新技能, 也是我之前一直最不懂的一块, 就是项目做完后如何部署到服务器,昨天尝试了部署uni-app项目到测试服务器, 成功之后很开心, 后面又自己上网学了下怎么部署vue项目, 所以这篇会讲怎么部署uni-app项目, 下一篇讲怎么部署vue项目, 好, 上操作

一 ,打包项目
HBuilderX下载地址: https://www.dcloud.io/hbuilderx.html

1 , HBuilderX打开你的uni-app项目 — > 点发行 – > 网站 – PC Web或手机H5

2 , 点完之后会弹出一个框, 填写网站标题和和域名之后点发行

3 , 点完之后控制台会显示正在编译中… , 稍等一会

4, 打包成功 , 生成了unpackage文件夹, 打包好的文件存放在里面

二 , 用一个工具, 把打包好的文件上传到你的服务器 , 我用的是Xftp , 用别的工具也可以
Xftp下载链接：https://pan.baidu.com/s/1z7-AYhinrWR3qIuZTkk0XQ
提取码：cn6m

1, 打开Xftp , 点小窗口的新建

2 , 点完之后弹出这个框, 填写完信息之后点连接 , 服务器的相关信息问公司的人要

3 , 点完连接之后 , 弹出这个框 , 点接受并保存

4 , 然后会看到右侧出现了新建会话的窗口 , 表示连接到服务器了,

左侧是你自己的电脑本地 , 右侧是服务器电脑

左侧进到刚刚打包好的文件存放路径 , unpackage/dist/build/h5 , 把static文件夹和index.html 复制到右侧服务器中部署的文件夹里 , 看你们是部署到哪个文件夹就拖到哪里

5 , 部署成功 !! 打开浏览器，输入服务器ip地址，访问一首页的内容吧 ^_^

地址就是 服务器ip/部署的文件夹/ , 比如 服务器ip是123.60.120.40:3006 ,部署的文件夹名字是project , 地址就是如下

http://123.60.120.40:3006/project/
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/weixin_49577940/article/details/118058899

来源： uView 2.0版本 http请求封装_uni.$u.route-CSDN博客

config/config.js写入

// 此vm参数为页面的实例，可以通过它引用vuex中的变量
module.exports = (vm) => {
	// 初始化请求配置
	uni.$u.http.setConfig((config) => {
		/* config 为默认全局配置*/
		config.baseURL = ''; /* 根域名 */
		return config
	})

	// 请求拦截
	uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
		// 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
		config.data = config.data || {}
		config.header['Content-Type'] = 'application/x-www-form-urlencoded'
		// console.log(uni.getStorageSync('storage_key'))
		// 根据custom参数中配置的是否需要token，添加对应的请求头
		if (uni.getStorageSync('storage_key')) {
			// 可以在此通过vm引用vuex中的变量，具体值在vm.$store.state中
			config.header.token = uni.getStorageSync('storage_key').token.token
		}
		return config
	}, config => { // 可使用async await 做异步操作
		return Promise.reject(config)
	})

	// 响应拦截
	uni.$u.http.interceptors.response.use((response) => {
		/* 对响应成功做点什么 可使用async await 做异步操作*/
		const data = response.data
		console.log(response.statusCode)
		// 自定义参数
		// const custom = response.config?.custom
		if (data.code != 1) {
			// 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
			if (data.msg) {
				uni.$u.toast(data.msg)
			}
			// // 如果需要catch返回，则进行reject
			// if (custom?.catch) {
			// 	return Promise.reject(data)
			// } else {
			// 	// 否则返回一个pending中的promise，请求不会进入catch中
			// 	return new Promise(() => {})
			// }
			
		}
		return data === undefined ? {} : data
	}, (response) => {
		// 对响应错误做点什么 （statusCode !== 200）
		if(response.statusCode==401){
			uni.$u.route('/pages/jy_Sign/jy_Sign')
		}
		return Promise.reject(response)
	})
}

config/api.js封装

const http = uni.$u.http
import qs from 'qs'
export const restlist = (params, config = {}) => http.post('/api/ebook/restlist', qs.stringify(params), config)

引入配置

main.js引入

// 引入请求封装，将app参数传递到配置中
require('./config/request.js')(app)
app.$mount()
使用

import {
		restlist
	} from '../../config/api.js'
	
	getdata() {
				var that = this;
				that.page = 1;
				this.status='loading'
				var data = {
					page: this.page,
					keywords: this.selected,
				};
				restlist(data).then(res => {
					this.status='loadmore'
					if (res.code == 1) {
						that.list = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch(err => {

				})
			},
			getmore() {
				var that = this;
				that.page = that.page + 1;
				that.status = 'loading';
				let data = {
					page: this.page,
					keywords: this.selected,
				};
				restlist(data).then(res => {
					var data = res.data;
					if (!data || data.length == 0) {
						that.status = 'nomore';
					}
					for (var i = 0; i < data.length; i++) {
						that.list.push(data[i]);
					}
				}).catch(err => {

				})
			},

request

// 此vm参数为页面的实例，可以通过它引用vuex中的变量
import configs from './config.js'
import {
	fungoPreviousPage
} from "@/utils/util.js"
module.exports = (vm) => {
	// 初始化请求配置
	uni.$u.http.setConfig((config) => {
		/* config 为默认全局配置*/
		config.baseURL = configs.baseUrl; /* 根域名 */
		return config
	})

	// 请求拦截
	uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
		config.header['Content-Type'] = 'application/json'
		config.data = config.data || {}

		// 根据custom参数中配置的是否需要token，添加对应的请求头
		config.header['cookie'] = uni.getStorageSync('cookie')
		// if (config?.custom?.auth) {
		// 	if (uni.getStorageSync('cookie')) {
		// 		// 可以在此通过vm引用vuex中的变量，具体值在vm.$store.state中
		// 	} else {
		// 		uni.redirectTo({
		// 			url: '/pages/login/wxlogin'
		// 		})
		// 	}
		// }
		return config
	}, config => { // 可使用async await 做异步操作
		return Promise.reject(config)
	})

	// 响应拦截
	uni.$u.http.interceptors.response.use((response) => {
		/* 对响应成功做点什么 可使用async await 做异步操作*/
		const data = response.data
		if (response.header['Set-Cookie']) {
			// Set-Cookie字符串获取
			var cookies = response.header['Set-Cookie']
			// 字符串分割成数组
			var cookieArray = cookies.split(/,(?=[^,]*=)/)
			// 分号拼接数组
			var newCookie = cookieArray.join(';')
			uni.setStorageSync('cookie', newCookie)
		}
		// 自定义参数
		// const custom = response.config?.custom
		if (data.code != 200) {
			// 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
			if (data.message) {
				uni.$u.toast(data.message)
			}

			if (data.code == 401) {
				// uni.clearStorageSync()
				fungoPreviousPage()
				uni.$u.route('/pages/login/wxlogin')
			}
			if (data.code == 602) {
				// uni.clearStorageSync()
				fungoPreviousPage()
				uni.$u.route('/pages/login/wxlogin')
			}
		}
		return data === undefined ? {} : data
	}, (response) => {
		// 对响应错误做点什么 （statusCode !== 200）
		if (response.statusCode == 401) {
			fungoPreviousPage()
			uni.$u.route('/pages/login/wxlogin')
		}
		return Promise.reject(response)
	})
}

来源： uni-app.02.提交form表单的两种方式_uniapp form表单提交-CSDN博客

来源： uni-app的H5版使用注意事项 – DCloud问答

uni-app x的web版运行注意事项，另见https://doc.dcloud.net.cn/uni-app-x/web/

HBuilderX 1.2开始包含了uni-app的web平台支持。

使用方式

1. 打开uni-app项目下的vue文件
2. 点击菜单 运行->运行到浏览器->Chrome
   
3. 在Chrome內打开调试模式（右键->检查）开启设备模拟，模拟移动设备（如果UI变形刷新即可）
   
4. HBuilderX修改代码后会自动刷新chrome的页面
5. 审查元素
   

   在chrome控制台安装vue devtools后可查看节点关系。
   安装方式自行搜索。
   每个页面都在page节点下，pageHead是微信和app下的原生导航栏，即pages.json里配的导航栏。
   pageBody是导航栏下的页面内容。
   所有标签为了避免和标准H5标签冲突，都加了U前缀。

6. 断点Debug
   点chrome控制台的source，可以给js打断点调试。
   找到同名的文件，如果没有同名vue文件，一般会有一个同文件名的js文件，此时会提示检测到sourcemap，是否引入，点允许。然后就会有同名的vue文件。如果找不到，则把焦点放到source的代码区，然后敲ctrl+p打开文件查找窗口，然后敲入vue页面名字，然后打开vue页面。
   这个vue里，只有js，没有tag和css，但可以打断点调试。
   
   
   
   

发布方式

1. 配置发行后的路径（发行在网站根目录可不配置），比如发行网站路径是www.xxx.com/html5，在manifest.json可视化界面 – H5配置 – 运行的基础路径中设置，也可以在源码视图内编辑h5节点，router下增加base属性为html5。
   可视化界面设置：
   

   源码视图设置：

   
2. 点击菜单 发行->H5
3. 在当下项目下的unpackage/dist/build/h5目录找到出的资源，部署服务器（或者使用本地服务器预览，不要直接在浏览器打开html文件）。如果发布使用的history模式，需要服务端配合，参考：后端配置方式

跨端注意

uni-app由uni的通用api和平台专有api组成，H5版也不例外。可以使用uni的通用api完成很多工作，也可以在条件编译里调用H5版的浏览器专有api。
虽然dom、window都可以用了，但如果要跨端，还是少写这样的代码好。
H5仍应该使用pages.json管理页面，强烈不建议使用浏览器的跳转页面的api。
H5的条件编译写法是把之前的app-plus换成H5。敲ifdef会有代码助手提示。

复制代码//#ifdef H5  
this.titleHeight = 44  
//#endif

条件编译目前有7个平台，APP-PLUS、APP-PLUS-NVUE、MP-WEIXIN、H5、MP、MP-BAIDU、MP-ALIPAY。
其中APP-PLUS-NVUE是APP-PLUS的子集，用于weex下单独写专用代码。
为了方便多平台选择，还引入了~#ifndef~，也就是ifdef的not，反向选择。以及或语法，及||。这些命名都是c语言条件编译的标准命名。

复制代码// #ifndef H5  
console.log("这段代码编译到非H5平台");  
// #endif

开发者之前为微信或app写的代码，H5的平台不支持时，需要注意把这些代码放到条件编译里。
经过这样的处理，之前做好的App或小程序才能正常运行到H5版里。

小程序版在UI上，尤其是导航栏上限制较多，H5在这里是参考了app，默认解析了pages.json下的app-plus的节点，实现了titleNView、buttons、下拉刷新（下拉刷新只有circle方式，因为只有这样的下拉刷新在H5版上可以保障流畅体验）

组件和API支持情况

目前的H5版，还没有100%实现uni的所有api，但大部分已经完成，具体参考uniapp文档。

第三方组件支持

• 支持mpvue组件
• 支持普通vue组件（仅H5平台）
• 支持微信小程序组件（HBuilderX2.5.0+开始支持编译到H5）
• 支持nvue

vue语法支持

H5版支持完整的vue语法，同时校验器也校验了更严格的vue语法，有些写法不规范会报警。比如data后面写对象会报警，必须写function。

注意事项（必看）

• 编译为H5版后生成的是单页应用，SPA。如果想要SEO优化，首页可以在template模板中配置keyword。二级页不支持配置。但一个更酷的方式是用uni-app直接发布一版百度小程序，搜索权重更高。
• 编译后看日志和错误，要看浏览器的控制台，而不是HBuilderX的控制台。浏览器的控制台会有错误提示。
• 网络请求（request、uploadFile、downloadFile等）在浏览器存在跨域限制（CORS、Cross-Origin），解决方案详见：https://ask.dcloud.net.cn/article/35267
• APP 和微信的原生导航栏和tabbar下，元素区域坐标是不包含原生导航栏和tabbar的。而 H5 里原生导航栏和tabbar是 div 模拟实现的，所以元素坐标会包含导航栏和tabbar的高度。为了优雅的解决多端高度定位问题，uni-app新增了2个css变量：–window-top和–window-bottom，这代表了页面的内容区域距离顶部和底部的距离。举个实例，如果你想在原生tabbar上方悬浮一个菜单，之前写bottom:0。这样的写法编译到h5后，这个菜单会和tabbar重叠，位于屏幕底部。而改为使用bottom:var(–window-bottom)，则不管在app下还是在h5下，这个菜单都是悬浮在tabbar上浮的。这就避免了写条件编译代码。当然你也仍然可以使用 H5 的条件编译处理界面的不同。
• CSS內使用vh单位的时候注意100vh包含导航栏，使用时需要减去导航栏和tabBar高度，部分浏览器还包含浏览器操作栏高度，使用时请注意。
• event 对象上使用的 mpvue 独有的属性需调整（比如 event.pageY，可能需要加上44px的导航栏高度）。
• fixed定位的组件有可能遮挡框架内置UI组件，如果不希望遮挡可以分平台判断，在H5平台避开内置UI。
• 正常支持rpx。px是真实物理像素。暂不支持通过设manifest的”transformPx” : true，把px当动态单位使用。
• 使用罗盘、地理位置、加速计等相关接口需要使用https协议，本地预览（localhost）可以使用 http 协议。
• PC 端 Chrome 浏览器模拟器设备测试的时候，获取定位 API 需要连接谷歌服务器，需要翻墙。
• 组件内（页面除外）不支持onLoad生命周期。
• 为避免和内置组件冲突，自定义组件请加上前缀（但不能是u和uni）。比如可使用的自定义组件名称：my-view、m-input、we-icon，例如不可使用的自定义组件名称：u-view、uni-input。如果已有项目使用了可能造成冲突的名称，请修改名称。另外微信小程序下自定义组件名称不能以wx开头。
• 在tabBar页面，如果page高度设置为100%时，页面超出滚动会导致底部被tabbar遮挡，可在tabbar页面去掉height:100%或者改用min-height:100%。
• 编写组件时需要遵守vue的规范，之前在app端和小程序端能使用的一些不规范写法需要纠正，比如：不要修改props的值、组件最外层template节点下不允许包含多个节点。
• 开发App时，不可在H5预览后直接云打包。需在HBuilderX里点运行-选择运行到手机，真机调试无误后再打包。
• H5端 “网络不给力” 原因及解决办法：https://ask.dcloud.net.cn/article/37065。

相关

uni-app编译H5底层技术解析：https://juejin.im/post/5c1b0d715188256973244377

来源： uni-app踩坑+小改造最近团队内部一直在试点用uni-app去做一些小需求，但主要是先在H5上做试点，之后再按计划编 – 掘金

// manifest.json
{
    "h5": {
        "devServer": {
            "proxy": {
                "/prefix/api/user/list": {
                    "target": "https://api-remote.xxxx.com",
                    "pathRewrite": {
                        "^/prefix": ""
                    }
                }
            }
        }
    }
}

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/prefix/api/user/list': {
        target: 'https://api-remote.xxxx.com',
        pathRewrite: {
          '^/prefix': ''
        }
      }
    },
  }
}

// vue.config.js
const webpackApiMocker = require('mocker-api')

module.exports = {
  devServer: {
    before (app) {
      webpackApiMocker(app, path.resolve('./mock/index.js'))
    }
  }
}

// mock/index.js
const Mock = require('mockjs')

const Random = Mock.Random
const mock = Mock.mock

const proxy = {
  'GET /api/user/list': mock({
    'array|3': [
      {
        id: 1,
        username: 'kenny',
        sex: 'male'
      }
    ]
  }),
  'POST /api/login/account': (req, res) => {
    return res.json({
      status: 'ok',
      data: {
        id: Random.id(),
        userName: Random.cname(),
        city: Random.city()
      }
    })
  }
}

module.exports = proxy

const projectName = 'xxx' // 当前工程名，此处自由发挥即可
const isDev = isDev() // 是否为本地开发环境，此处自由发挥即可
const CDN_HOST = process.env.CDN_HOST   // build时指定的CDN域名
const APP_ENV = process.env.APP_ENV // build时指定的自定义环境

module.exports = {
  publicPath: isDev
    ? '/'
    : `//${CDN_HOST}/static/${projectName}/${APP_ENV}/`,
}

// @dcloudio/vue-cli-plugin-uni/index.js#L30
// 获取本地的project-config配置
module.exports = (api, options) => {
    const projectConfig = require(api.resolve('project-config'))

    Object.assign(options, { 
        outputDir: process.env.UNI_OUTPUT_TMP_DIR || process.env.UNI_OUTPUT_DIR,
        assetsDir
    }, vueConfig, {
        // 重新对publicPath进行覆盖
        publicPath: process.env.NODE_ENV === 'production' ? projectConfig.publicPath : '/'
    })
}

来源： uni-app ＜image＞和vue中img标签动态绑定src不显示本地图片 – web_pzj – 博客园

因为需要根据后端返回的数据渲染不同的图片，所有要对imge标签的src进行动态绑定。

以下是静态绑定时的代码，静态绑定无任何问题。

下方是静态绑定时的正常图片：

以下是动态绑定时的代码，但是图片无法显示。

无法显示效果图：

解决办法一：用将路径放入require()中。

解决办法二：不要使用../，改为根目录/

来源： uniapp 中出现 Undefined variable $u-type-primary-light 问题_undefined variable: “$u-type-primary-light”.-CSDN博客

来源： uni-app 分不清的全局变量this, uni, $u, vm, uni.$u, this.$u-CSDN博客

项目引入了uview,并将uview所有模块指给uniapp全局变量uni

uni.$u=$u

在登录页面，或者APP.vue打印以下变量：

this, uni, $u, vm, uni.$u, this.$u

// this,$u,vm,uni， this.$u， uni.$u全局变量说明
console.log(“>>this”, this)
console.log(“>>uni”, uni)
console.log(“>>this===uni”, this === uni) //false
console.log(“>>this.$u “, this.$u)
console.log(“>>uni.$u “, uni.$u)
console.log(“>>this.$u===uni.&u”, this.$u === uni.$u) //ture

try {//$u is not defined
console.log(“>>$u “, $u)
} catch (e) {
console.log(e)
}
try { //vm is not defined
console.log(“>>this.vm”, this.vm)
console.log(“>>vm “, vm)
} catch (e) {
console.log(e)
}
运行结果
$u 是uview挂载到uni上的，方便使用uni来操作uview组件。

uni. 对象是uni-app框架实例。

this. 在.vue页面，对应就是当前vue的实例对象。

this.$u 与uni.$u 在vue页面是同一对象，指向 uview

$u来源
uniapp-master\uview-ui\index.vue，在此vue里，通过xx.prototype.$u的方法 ，通过uni.$u方法同时挂载到全局里。

// 引入全局mixin
import mixin from ‘./libs/mixin/mixin.js’

// 防抖方法
import debounce from ‘./libs/function/debounce.js’
// 节流方法
import throttle from ‘./libs/function/throttle.js’
import {fixMoney2Decimal, formatInputMoney, toFixed2Decimal} from “@/uview-ui/libs/function/numberform”;
import {positiveNumber} from “@/uview-ui/libs/function/inputRegExp”;
//…
//…

// 配置信息
import config from ‘./libs/config/config.js’
// 各个需要fixed的地方的z-index配置文件
import zIndex from ‘./libs/config/zIndex.js’
import {timeFormatCmm} from “@/uview-ui/libs/function/timeFormatStr”;

const $u = {
queryParams: queryParams,
positiveNumber: positiveNumber,
route: route,
timeFormat: timeFormat,
date: timeFormat, // 另名date
timeFormatCmm: timeFormatCmm,
timeFrom,
colorGradient: colorGradient.colorGradient,
colorToRgba: colorGradient.colorToRgba,
guid,
color,
sys,
os,
type2icon,
randomArray,
wranning,
get: http.get,
post: http.post,
put: http.put,
‘delete’: http.delete,
hexToRgb: colorGradient.hexToRgb,
rgbToHex: colorGradient.rgbToHex,
test,
random,
deepClone,
deepMerge,
getParent,
$parent,
addUnit,
trim,
type: [‘primary’, ‘success’, ‘error’, ‘warning’, ‘info’],
http,
toast,
toastErr,
toastS,
modal,
config, // uView配置信息相关，比如版本号
zIndex,
debounce,
throttle,

//–
toFixed2Decimal,
fixMoney2Decimal,
formatInputMoney
}

// $u挂载到uni对象上
uni.$u = $u

const install = Vue => {
Vue.mixin(mixin)
if (Vue.prototype.openShare) {
Vue.mixin(mpShare);
}
// Vue.mixin(vuexStore);
// 时间格式化，同时两个名称，date和timeFormat
Vue.filter(‘timeFormat’, (timestamp, format) => {
return timeFormat(timestamp, format)
})
Vue.filter(‘date’, (timestamp, format) => {
return timeFormat(timestamp, format)
})
// 将多久以前的方法，注入到全局过滤器
Vue.filter(‘timeFrom’, (timestamp, format) => {
return timeFrom(timestamp, format)
})
Vue.prototype.$u = $u
}

export default {
install
}
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/LlanyW/article/details/132522228

来源： 【uni-app项目如何引入 uView组件库】_uview安装到uni-app项目-CSDN博客

uniapp项目引入uView组件库
一、uView官方文档
二、公司项目中引入并使用uView
一、uView官方文档
uView官方文档

二、公司项目中引入并使用uView
第一步：

在公司创建完成uniapp项目后引入uView

第二步：

您如果是使用HBuilder X创建的uniapp项目，使用uView组件库的话需要在HBuilder X下载插件库 下载 uni_modules ，(如果这个看不懂可以看官方文档)

(1) HBuilder X插件库中下载 uni_modules

现在是已经将 uView导入到项目中了，接下来还需要对项目中uView组件库样式的导入，(具体步骤官方文档里都有)

如果之前安装过scss，可以直接跳过

这里的scss仅限于是通过Vcode开发uniapp的

通过HBuilder X 下载scss

在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

// main.js
import uView from ‘@/uni_modules/uview-ui’
Vue.use(uView)

在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import ‘@/uni_modules/uview-ui/theme.scss’;

到这一步可以直接启动项目，里边的组件均可使用
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/Lnbd_/article/details/129470614