devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp实现常用功能_uniapp pageorientation

作者：weixin_40725706 | 2024-03-14 00:18:21

赞

踩

uniapp pageorientation

1.pages.json 

 官网地址：https://uniapp.dcloud.io/collocation/pages?id=%e9%85%8d%e7%bd%ae%e9%a1%b9%e5%88%97%e8%a1%a8

    pages.json是对uniapp进行全局配置，决定了页面文件的路径，窗口样式，原生导航栏，底部原生tabbar等，类似于微信小程序中的app.json的页面管理部分

   globalStyle - 对整个项目的全局配置 - 配置导航栏的信息

   tabBar对底部tab的配置

   pages对单个页面的配置，可以配置是否显示顶部导航栏等

pages.json - 单独配置某个页面的导航栏显示

1.设置基本导航栏

(1)基本配置

  1.    pages: [{
  2. 	"path": "pages/tabbar/tabbar-3/tabbar-3",
  3. 	"style": {
  4. 		"titleNView": {
  5. 			"titleColor": "#ffffff",
  6. 			"titleText": "详情",
  7. 				"backgroundColor": "#186ff2"
  8. 				},
  9. 			"navigationStyle": "default"
  10. 		}
  11.  
  12. 	}],

(2)动态修改配置

  1. onLoad(){
  2.   //设置顶部导航栏的文本文字
  3.     uni.setNavigationBarTitle({
  4. 			    title: '消息'
  5. 			})
  6.   //设置导航栏样式
  7.     uni.setNavigationBarColor({
  8. 			frontColor: '#ffffff',
  9. 			backgroundColor: '#196ff2'
  10. 		});
  11. }

2.配置文件，设置某个文件不显示顶部导航栏

  1.        {
  2. 			"path": "pages/addressBook/myInfoDetail", //个人通讯录详情
  3. 			"style": {
  4. 				"app-plus": {
  5. 					"titleNView": false
  6. 				}
  7. 			}
  8. 		},

3.导航栏左边部分显示文字或图标

’

pages的配置：

  1. 	{
  2. 			"path": "pages/noticyManage/detail", //通知管理详情
  3. 			"style": {
  4. 				"titleNView": {
  5. 					"titleColor": "#ffffff",
  6. 					"titleText": "",
  7. 					"backgroundColor": "#186ff2",
  8. 					"buttons": [{
  9. 						"text": "···",
  10. 						"fontSize": "24",
  11. 						"redDot": false
  12. 					}]
  13. 				}
  14. 			}
  15. 		},

页面监听触发

  1. onNavigationBarButtonTap(e) {
  2. 			console.log(e)
  3. 			if(e.text == '添加'){
  4. 				//跳转到添加页面
  5. 				uni.navigateTo({
  6. 					url: '/pages/showFoods/addFoods'
  7. 				})
  8. 			}
  9. 		},

types在官网的配置文档 - uni-app官网

可以进行自定义按钮 -

设置导航栏左边部分

下面是一个例子，基本满足普通项目需求的配置

  1. {
  2.     "pages": [{  //页面路径和窗口的表现
  3.         "path": "pages/component/index", //配置路径
  4.         "style": {
  5.             "navigationBarTitleText": "组件" 
  6.         }
  7.     }, {
  8.         "path": "pages/API/index",
  9.         "style": {
  10.             "navigationBarTitleText": "接口"
  11.         }
  12.     }, {
  13.         "path": "pages/component/view/index",
  14.         "style": {
  15.             "navigationBarTitleText": "view"
  16.         }
  17.     }],
  18.     "condition": { //模式配置，仅开发期间生效
  19.         "current": 0, //当前激活的模式（list 的索引项）
  20.         "list": [{
  21.             "name": "test", //模式名称
  22.             "path": "pages/component/view/index" //启动页面，必选
  23.         }]
  24.     },
  25.     "globalStyle": { //页面的默认样式
  26.         "navigationBarTextStyle": "black", //导航栏标题颜色及状态栏前景色（white/black）
  27.         "navigationBarTitleText": "演示", //导航栏文字内容
  28.         "navigationBarBackgroundColor": "#F8F8F8", //导航栏背景色
  29.         "backgroundColor": "#F8F8F8", //下拉显示窗口背景色
  30.         "usingComponents":{ //引用小程序组件
  31.             "collapse-tree-item":"/components/collapse-tree-item"
  32.         },
  33.         "renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
  34.         "pageOrientation": "portrait"//横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
  35.     },
  36.     "tabBar": { //底部tab的表现
  37.         "color": "#7A7E83",
  38.         "selectedColor": "#3cc51f",
  39.         "borderStyle": "black",
  40.         "backgroundColor": "#ffffff",
  41.         "height": "50px",
  42.         "fontSize": "10px",
  43.         "iconWidth": "24px",
  44.         "spacing": "3px",
  45.         "list": [{
  46.             "pagePath": "pages/component/index",
  47.             "iconPath": "static/image/icon_component.png",
  48.             "selectedIconPath": "static/image/icon_component_HL.png",
  49.             "text": "组件"
  50.         }, {
  51.             "pagePath": "pages/API/index",
  52.             "iconPath": "static/image/icon_API.png",
  53.             "selectedIconPath": "static/image/icon_API_HL.png",
  54.             "text": "接口"
  55.         }],
  56.         "midButton": {
  57.             "width": "80px",
  58.             "height": "50px",
  59.             "text": "文字",
  60.             "iconPath": "static/image/midButton_iconPath.png",
  61.             "iconWidth": "24px",
  62.             "backgroundImage": "static/image/midButton_backgroundImage.png"
  63.         }
  64.     },
  65.   "easycom": { //组件自动引入规则
  66.     "autoscan": true, //是否自动扫描组件
  67.     "custom": {//自定义扫描规则
  68.       "uni-(.*)": "@/components/uni-$1.vue"
  69.     }
  70.   }
  71. }

2.跳转，传参与接收

  1.链接跳转

   官网 - uni-app官网

    传参 地址?参数名=参数值&参数名=参数值

 <navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover"> <button type="default">跳转到新页面</button> </navigator>

   属性：open-type 可以选择跳转方式

  2.点击等事件触发跳转

  官网 - uni-app官网

  注意:跳转的路径为非tabbar的页面路径

  1. uni.navigateTo({
  2.     url: 'test?id=1&name=uniapp'
  3. });

 3.接收

   在生命周期中接收

  1.    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
  2.         console.log(option.id); //打印出上个页面传递的参数。
  3.         console.log(option.name); //打印出上个页面传递的参数。
  4.     }

3.解决跨域问题

跨域问题和vue的解决利用代理一样，只是uniapp配置的地方不同

  1. "h5" : {
  2.         "optimization" : {
  3.             "treeShaking" : {
  4.                 "enable" : false
  5.             }
  6.         },
  7.         "devServer" : {
  8.             "disableHostCheck" : true,
  9.             "port" : "8081",
  10.             "proxy" : {
  11.                 "" : {
  12.                     // "target" : "http://20.4.5.35", //生产环境
  13.                     "target" : "http://192.168.1.107:8083",
  14.                     // "target" : "http://211.92.134.56:8282",
  15.                     "changeOrigin" : true
  16.                 }
  17.             }
  18.         },
  19.         "domain" : "www.test.test"
  20.     }

4.利用原生实现上传附件

uniapp的上传_哆来A梦没有口袋的博客-CSDN博客

5.富文本上传视频等和回显

富文本其实uniapp也是有自己的组件，但是值得悲伤的是，uniapp自带的组件在app是不支持视频上传和解析(rich-text)的（uni-app官网），其实也有很多现有的封装好的组件不满足需求

因此这里借用了wangEdtior进行上传，利用原生代码进行解析回显

wangEditor上传视频在h5是可以的，在app需要修改源码支持，这里就友情提示，可以根据上传图片进行修改上传视频

上传的案例

  1. <template>
  2. 	<view class="addOrEditMsg_wagePolicy" :editorHtml="editorHtml" :change:editorHtml="wagePolicyNew.changeHtml">
  3. 		<view>
  4. 			<u-form :model="form" ref="uForm">
  5.  
  6. 				<u-form-item label="标题" prop="title" required>
  7. 					<u-input v-model="form.title" placeholder="请输入标题" />
  8. 				</u-form-item>
  9.  
  10. 				<u-form-item label="正文内容" prop="policy_content" required class="hasTextarea form_flex_column">
  11. 					<view class="editH" id="editH">
  12. 						<!-- <jinEdit placeholder="请输入内容并保存" ref="editFrom" @editOk="editOk" :html="initHtml"></jinEdit> -->
  13. 					</view>
  14. 				</u-form-item>
  15.  
  16. 				<u-form-item label="附件" prop="attachment_code" class="form_flex_column">
  17. 					<view class="test">
  18. 						<view class="wrap">
  19. 							<view class="pre-box">
  20. 								<view class="pre-item" v-for="(item, index) in lists" :key="index">
  21. 									<view><text class="textOver">{{item.substr(item.lastIndexOf('\\') + 1)}}</text>
  22. 										<image src="../../static/img/icon/false.png" @click="delfoc(index)"></image>
  23. 									</view>
  24. 								</view>
  25. 							</view>
  26. 							<view class="uploadFiles">
  27. 								<UploadFile @uploaded='uploaded'></UploadFile>
  28. 							</view>
  29. 						</view>
  30. 					</view>
  31. 				</u-form-item>
  32.  
  33. 			</u-form>
  34.             
  35. 			<view class="form_button flex_a">
  36. 				<button @click="wagePolicyNew.submitToComp">提交</button>
  37. 			</view>
  38.  
  39.  
  40. 		</view>
  41.  
  42.  
  43. 	</view>
  44. </template>
  45.  
  46.  
  47. <script>
  48. 	import {
  49. 		Config
  50. 	} from '@/utils/config.js';
  51. 	const config = new Config();
  52. 	let prefix = config.getImgPdfUrl();
  53. 	// import jinEdit from '@/components/jin-edit/jin-edit.vue';
  54. 	import {
  55. 		UploadApi
  56. 	} from '@/api/upload.js';
  57. 	import {
  58. 		WagePolicyApi
  59. 	} from '@/api/wagePolicy.js';
  60.     import UploadFile from '@/pages/commonComponents/uploadFile.vue'
  61. 	const uploadApi = new UploadApi();
  62. 	const wagePolicyApi = new WagePolicyApi();
  63. 	export default {
  64. 		components: {
  65. 			UploadFile // jinEdit
  66. 		},
  67. 		data() {
  68. 			return {
  69. 				showUploadList: false, //展示下载列表
  70. 				lists: [], //附件列表
  71. 				initHtml: '',
  72.                 editorHtml: '',
  73. 				fileList: [],
  74. 				// attachmentList: [], //附件列表
  75. 				form: {
  76. 					title: "", //标题
  77. 					"policy_content": "", //正文内容
  78. 					attachment_code: {
  79. 						attachment: []
  80. 					}, //附近
  81. 					sys_org_code: '', //部门id
  82. 					create_by: '', //创建人
  83. 					create_name: "", //创建人姓名
  84. 				},
  85. 				attachmentLimitType: ['zip', 'docx', 'doc', 'pdf', 'xlsx', 'xls','jpg', 'png', 'jpeg'], //文档限制类型
  86. 				rules: {
  87. 					title: [{
  88. 						required: true,
  89. 						message: '请输入标题',
  90. 						// 可以单个或者同时写两个触发验证方式 
  91. 						trigger: ['change', 'blur'],
  92. 					}]
  93. 				},
  94.  
  95. 			}
  96. 		},
  97. 		onLoad(params) {
  98. 			this.form.sys_org_code = this.vuex_org_code;
  99. 			this.form.create_by = this.vuex_userName;
  100. 			this.form.create_name = this.vuex_realname;
  101.  
  102. 			this.flag = params.flag; //1为新增，2为编辑
  103. 			this.addOpt = params.addOpt;
  104. 			//新增
  105. 			if (params.flag == 1) {
  106. 				uni.setNavigationBarTitle({
  107. 					title: '新增'
  108. 				})
  109. 			} else {
  110. 				//编辑
  111. 				uni.setNavigationBarTitle({
  112. 					title: '编辑'
  113. 				})
  114.  
  115. 				this.id = params.id;
  116. 				this.getDetail(params.id)
  117. 			}
  118. 		},
  119. 		mounted() {
  120. 			this.$refs.uForm.setRules(this.rules);
  121. 		},
  122. 		methods: {
  123. 			//上传显示
  124.             uploaded(url) {
  125. 			    this.lists.push(url)
  126.             },
  127. 			//获取细节详情
  128. 			async getDetail(id) {
  129. 				try {
  130. 					let res = await wagePolicyApi.queryWagePolicyDetail(id);
  131. 					console.log(res)
  132. 					this.editorHtml = this.initHtml = res.policy_content.replace(/\http:.*?\upload/g, `${prefix}/upload`);
  133. 					this.form.policy_content = res.policy_content.replace(/\http:.*?\upload/g, `${prefix}/upload`);
  134. 					this.form.title = res.title;
  135.                     
  136. 					//回显pdf
  137. 					if (res.attachment_code) {
  138. 						let files = res.attachment_code.split(',')
  139. 						if (files.length > 0) {
  140. 							this.lists = files;
  141. 						}
  142. 					}
  143.  
  144. 				} catch (err) {
  145. 					console.log(err)
  146. 					throw(e)
  147. 				}
  148. 			},
  149.  
  150. 			//提交表单
  151. 			submit(html) {
  152. 				this.$refs.uForm.validate(async valid => {
  153. 					if (valid) {
  154. 						//对正文内容进行判断
  155. 						this.form.policy_content = html;
  156. 						if (!this.form.policy_content) {
  157. 							uni.showToast({
  158. 								title: '请输入正文内容',
  159. 								icon: 'none'
  160. 							});
  161. 							return
  162. 						}
  163. 					    this.form.attachment_code= this.lists.join(',');
  164. 						this.toApproval();
  165. 					} else {
  166. 						console.log('验证失败');
  167. 					}
  168. 				});
  169. 			},
  170. 			delfoc(index) {
  171. 				// 删除文档
  172. 				this.lists.splice(index, 1);
  173. 			},
  174. 			async toApproval() {
  175. 				console.log('真实提交')	
  176. 				try {
  177. 					let res, title
  178. 					if (this.flag == 1) {
  179. 						console.log(this.form, 'xxx');
  180. 						res = await wagePolicyApi.addApprovalData(this.form);
  181. 						title = '提交成功'
  182. 					} else {
  183. 						this.form['id'] = this.id;
  184. 						res = await wagePolicyApi.editApprovalData(this.form);
  185. 						title = '修改成功'
  186. 					}
  187. 					uni.showToast({
  188. 						title,
  189. 						duration: 2000
  190. 					})
  191. 					//跳转到列表页面
  192. 					setTimeout(() => {
  193. 						//跳转到列表页面
  194. 						uni.navigateTo({
  195. 							url: `/pages/wagePolicy/index?addOpt=${this.addOpt}`	
  196. 						})
  197. 					}, 2000)
  198. 				} catch (e) {
  199. 					throw (e)
  200. 				}
  201. 			}
  202. 		}
  203. 	}
  204. </script>
  205.  
  206. <script module="wagePolicyNew" lang="renderjs">
  207. 	import wangEditor from '@/utils/wangEditor.js';
  208.     import {
  209.     	UploadApi
  210.     } from '@/api/upload.js';
  211.     const uploadApi = new UploadApi();
  212.     import {
  213.     	Config
  214.     } from '@/utils/config.js';
  215.     const config = new Config();
  216.     let prefix = config.getImgPdfUrl();
  217.     let editor;
  218. 	export default {
  219. 		beforeDestroy(){
  220. 			editor.destroy();
  221. 		},
  222. 		mounted() {
  223. 			editor = new wangEditor('#editH');
  224. 			editor.config.showFullScreen = false;
  225. 			editor.config.showLinkImg = false
  226. 			editor.config.excludeMenus = [
  227. 				'indent',
  228. 				'code'
  229. 			]
  230. 			//编辑设置
  231. 			if (this.flag !== 1) {
  232. 				//设置初始化
  233. 				editor.txt.html(this.initHtml);
  234. 			}
  235.  
  236. 			editor.create();
  237.  
  238. 			//绑定wangEditor的插入图片和视频
  239. 			editor.config.customUploadImg = async (resultFiles, insertImgFn) => {
  240. 				// resultFiles 是 input 中选中的文件列表
  241. 				// insertImgFn 是获取图片 url 后，插入到编辑器的方法
  242. 				// 上传图片，返回结果,将图片插入到编辑器中
  243. 				try {
  244. 					let res = await uploadApi.uploadFileByJquery(resultFiles[0], 1);
  245.                     console.log(res)
  246. 					insertImgFn(prefix + res)
  247. 				} catch (e) {
  248. 					// uni.showToast({
  249. 					// 	title: '上传图片失败',
  250. 					// 	icon: 'none'
  251. 					// });
  252. 					throw (e)
  253. 				}
  254. 			};
  255. 			
  256. 			//上传视频
  257. 			editor.config.customUploadFile = async (file, i) => {
  258. 				console.log(file, i);
  259. 				console.log(URL.createObjectURL(file[0]), 'xx')
  260.  
  261. 				try {
  262. 					let res = await uploadApi.uploadFileByJquery(file[0], 2);
  263. 					console.log(res, 'res返回数据');
  264. 					// 做上传
  265. 					// 返回src
  266. 					i(editor, prefix + res)
  267. 					document.getElementsByClassName('w-e-panel-container')[0].style.diplay = none;
  268. 				} catch (e) {
  269. 					throw (e)
  270. 				}
  271. 			}
  272. 		},
  273.         methods:{
  274.             submitToComp() {
  275.                 this.$ownerInstance.callMethod('submit', editor.txt.html())
  276.             },
  277.             changeHtml(newValue, oldValue, ownerVm, vm) {
  278.                 editor.txt.html(newValue)
  279.             }
  280.         }
  281. 	}
  282. </script>
  283.  
  284. <style lang="scss" scoped>
  285. 	@import 'uview-ui/libs/css/style.components.scss';
  286.  
  287. 	.addOrEditMsg_wagePolicy {
  288. 		background: #f5f6f8;
  289.  
  290. 		.form_flex_column /deep/ .u-form-item__body {
  291. 			display: flex;
  292. 			flex-direction: column !important;
  293. 		}
  294.  
  295.  
  296.  
  297.  
  298. 		.form_step {
  299. 			width: 100%;
  300. 			display: flex;
  301. 			flex-direction: row;
  302. 			justify-content: space-between;
  303. 			align-items: center;
  304. 			height: 150rpx;
  305.  
  306. 			.form_step_left {
  307. 				display: flex;
  308. 				flex-direction: row;
  309. 				align-items: center;
  310.  
  311. 				.form_dot {
  312. 					width: 15rpx;
  313. 					height: 15rpx;
  314. 					border-radius: 50%;
  315. 					background: #dadada;
  316. 					margin-right: 34rpx;
  317. 				}
  318.  
  319. 				.form_text {
  320. 					display: flex;
  321. 					margin-right: 34rpx;
  322. 					flex-direction: column;
  323. 					justify-content: space-around;
  324. 					align-items: center;
  325. 					height: 68rpx;
  326. 					line-height: 0;
  327.  
  328. 					text:last-child {
  329. 						color: #a9a9a9;
  330. 					}
  331. 				}
  332. 			}
  333.  
  334.  
  335. 			.form_step_right {
  336. 				width: 60%;
  337. 				height: 100%;
  338. 				// display: flex;
  339. 				flex-direction: row;
  340.  
  341. 				// align-items: center;
  342. 				.form_step_right_show {
  343. 					padding-top: 15rpx;
  344. 					max-width: 80%;
  345. 					float: right;
  346.  
  347.  
  348. 					/deep/ .uni-scroll-view-content {
  349. 						display: flex !important;
  350. 						flex-direction: row;
  351. 						// justify-content: flex-end;
  352. 					}
  353.  
  354. 					.form_step_right_showImg {
  355. 						display: flex !important;
  356. 						flex-direction: row;
  357. 						flex-wrap: nowrap;
  358.  
  359. 						.form_step_right_icon {
  360. 							line-height: 75rpx;
  361. 							color: #999;
  362. 							margin: 0 10rpx;
  363. 						}
  364.  
  365. 						&>view {
  366. 							position: relative;
  367.  
  368. 							display: flex;
  369. 							flex-direction: column;
  370. 							align-items: center;
  371. 							justify-content: center;
  372.  
  373. 							image {
  374. 								width: 70rpx;
  375. 								height: 70rpx;
  376. 								border-radius: 50%;
  377. 							}
  378.  
  379. 							text {
  380. 								margin-top: -15rpx;
  381. 								color: #999;
  382. 							}
  383.  
  384.  
  385.  
  386. 							.form_step_people_del {
  387. 								position: absolute;
  388. 								top: 5rpx;
  389. 								right: 0;
  390. 								width: 23rpx;
  391. 								height: 23rpx;
  392. 								font-size: 15rpx;
  393. 								border-radius: 50%;
  394. 								line-height: 15rpx;
  395. 								text-align: center;
  396. 								color: white;
  397. 								background: black;
  398. 							}
  399. 						}
  400. 					}
  401. 				}
  402.  
  403. 				.form_step_right_add {
  404. 					float: right;
  405. 					margin-top: 15rpx;
  406. 					width: 70rpx;
  407. 					height: 70rpx;
  408. 					border-radius: 50%;
  409. 					margin-left: 10rpx;
  410. 					text-align: center;
  411. 					line-height: 65rpx;
  412. 					font-size: 45rpx;
  413. 					font-weight: 600;
  414. 					color: #01a4e8;
  415. 					border: 1px dashed #01a4e8;
  416. 				}
  417. 			}
  418. 		}
  419.  
  420. 		.form_button {
  421. 			width: 100%;
  422. 			height: 120rpx;
  423. 			background: white;
  424.  
  425. 			button {
  426. 				width: 480rpx;
  427. 				height: 85rpx;
  428. 				background: #0383fb;
  429. 				border: none !important;
  430. 				border-radius: 10rpx;
  431. 				color: white;
  432. 			}
  433. 		}
  434.  
  435.  
  436.  
  437. 		.hasTextarea /deep/ .u-form-item__body {
  438.  
  439.  
  440. 			.u-form-item--right__content {
  441. 				height: 880rpx;
  442. 			}
  443.  
  444. 			.u-form-item--left__content {
  445. 				flex: 0 0 138rpx;
  446. 			}
  447.  
  448. 			.uni-input-placeholder {
  449. 				top: 0 !important;
  450. 			}
  451.  
  452. 			.u-input__input {
  453. 				max-height: 170rpx !important;
  454. 			}
  455.  
  456. 			.u-input {
  457. 				text-align: left !important;
  458. 				height: 170rpx;
  459. 				// margin-right: 15rpx;
  460. 				// text-indent: 22rpx;
  461. 			}
  462. 		}
  463.  
  464.  
  465. 		.u-form-item {
  466. 			margin-bottom: 14rpx;
  467. 			font-size: 32rpx !important;
  468. 			background: white;
  469. 			padding: 15rpx 30rpx;
  470. 			border: none;
  471. 			line-height: none;
  472.  
  473. 			/deep/.u-form-item--left__content .u-form-item--left__content--required {
  474. 				color: #fa3534;
  475. 				left: 100% !important;
  476. 			}
  477.  
  478. 			/deep/ .u-form-item--left {
  479. 				width: auto !important;
  480. 				flex: none !important;
  481. 				margin-right: 36rpx;
  482. 			}
  483.  
  484. 			/deep/ .u-input {
  485. 				text-align: right !important;
  486.  
  487. 			}
  488.  
  489. 			// &:first-child /deep/ .uni-input-placeholder {
  490. 			// 	left: -38rpx !important;
  491. 			// }
  492.  
  493. 			/deep/ .uicon-arrow-down-fill:before {
  494. 				position: absolute;
  495. 				top: -28rpx;
  496. 				font-size: 30rpx;
  497. 				content: '>' !important;
  498. 			}
  499.  
  500. 		}
  501.  
  502. 		.editH {
  503. 			width: 100%;
  504. 			height: 800rpx;
  505. 			max-width: 700rpx;
  506. 			z-index: 0;
  507.  
  508. 			// overflow-y: scroll;
  509. 			/deep/ .w-e-toolbar .w-e-droplist {
  510. 				left: -45px !important;
  511. 			}
  512. 		}
  513.  
  514. 		//弹出层样式
  515. 		.toCommomApproval_modal {
  516. 			.content {
  517.  
  518. 				// padding: 0 50rpx;
  519. 				.content_top_button {
  520. 					padding: 25rpx 50rpx;
  521. 					border-bottom: 1rpx solid #F5F7F9;
  522. 					font-weight: 500;
  523. 				}
  524.  
  525. 				.content_main {
  526. 					padding: 0 50rpx;
  527. 					color: rgb(96, 98, 102);
  528.  
  529. 					.unitType {
  530. 						padding: 25rpx 0;
  531. 						border-bottom: 1rpx solid #F5F7F9;
  532. 					}
  533. 				}
  534. 			}
  535. 		}
  536.  
  537. 		.test {
  538. 			width: 700rpx;
  539. 			
  540. 			
  541. 			.wrap {
  542. 				padding: 24rpx;
  543. 				width: 100%;
  544.  
  545. 				.slot-btn {
  546. 					width: 140rpx;
  547. 					height: 140rpx;
  548. 					display: flex;
  549. 					justify-content: center;
  550. 					// align-items: center;
  551. 					line-height: 130rpx;
  552. 					font-size: 60rpx;
  553. 					background: rgb(244, 245, 246);
  554. 					border-radius: 10rpx;
  555. 				}
  556.  
  557. 				.slot-btn__hover {
  558. 					background-color: rgb(235, 236, 238);
  559. 				}
  560.  
  561. 				.pre-box {
  562. 					display: flex;
  563. 					align-items: center;
  564. 					justify-content: space-between;
  565. 					flex-wrap: wrap;
  566. 				}
  567.  
  568. 				.pre-item {
  569. 					width: 100%;
  570. 					// border-radius: 10rpx;
  571. 					// height: 140rpx;
  572. 					overflow: hidden;
  573. 					position: relative;
  574.  
  575. 					&>view {
  576. 						display: flex;
  577. 						flex-direction: row;
  578. 						justify-content: space-between;
  579. 						align-items: center;
  580. 						font-size: 30rpx;
  581.  
  582. 						text {
  583. 							width: 90%;
  584. 						}
  585.  
  586. 						image {
  587. 							width: 30rpx;
  588. 							height: 30rpx;
  589. 						}
  590. 					}
  591.  
  592. 				}
  593.  
  594. 			}
  595.  
  596.  
  597. 		}
  598.  
  599.  
  600.  
  601. 	}
  602. </style>

视频图片等富文本的回显 - 同样是利用renderjs,原生解析，与上传附件类似

  1. <template>
  2. 	<view :id="randomID" :richHtml="richHtml" :change:richHtml="richTextSelf.changeHtml" :randomID="randomID" :change:randomID="richTextSelf.changeRandomID">
  3. 	</view>
  4. </template>
  5.  
  6. <script>
  7. 	export default {
  8.         name: 'rich-text-self',
  9.         props:{
  10.             id: '',
  11.             html: '',
  12.         },
  13. 		data() {
  14. 			return {
  15. 				randomID: '',
  16.                 richHtml: ''
  17. 			};
  18. 		},
  19.         mounted() {
  20.             this.randomID = 'richtextSelf' + parseInt(Math.random() * 10000)
  21.             this.richHtml = this.html
  22.         },
  23.         created() {
  24.             
  25.         }
  26. 	}
  27. </script>
  28.  
  29. <script module="richTextSelf" lang="renderjs">
  30.     var container
  31.     var html
  32. 	export default {
  33. 		mounted() {},
  34. 		methods: {
  35. 			changeHtml(newValue, oldValue, ownerVm, vm) {
  36. 			    html = newValue
  37.                 var div = document.createElement("DIV");
  38.                 div.className = 'rich-text-self'
  39.                 var reg = new RegExp('<video', 'g');
  40.                 html = html.replace(reg, '<video style="width:100%;"')
  41.                 div.innerHTML = "'" + html + "'"
  42.                 var videos = document.getElementsByTagName('video', div)
  43. 				if(videos && videos.length > 0){
  44. 					videos.forEach(video => {
  45. 					    video.style.width = '100%'
  46. 					})
  47. 				}
  48. 				
  49. 				var regImg = new RegExp('<img', 'g');
  50. 				html = html.replace(regImg, '<img style="width:100%;"')
  51. 				div.innerHTML = "'" + html + "'"
  52. 				// var videos = document.getElementsByTagName('video', div)
  53. 				// if(videos && videos.length > 0){
  54. 				// 	videos.forEach(video => {
  55. 				// 	    video.style.width = '100%'
  56. 				// 	})
  57. 				// }
  58.                
  59.                 container.appendChild(div)
  60. 			},
  61.             changeRandomID(newValue, oldValue, ownerVm, vm) {
  62.                 container = document.getElementById(newValue)
  63.             }
  64. 		}
  65. 	}
  66. </script>

6.实现下拉刷新

pages里面配置

  1. {
  2. 			"path": "pages/commonComponents/DynamicForm/index", //公共表单首页
  3. 			"style": {
  4. 				"enablePullDownRefresh": true, //可以下来刷新
  5. 				"titleNView": {
  6. 					"titleColor": "#ffffff",
  7. 					"titleText": "",
  8. 					"backgroundColor": "#186ff2"
  9. 				},
  10. 				"navigationStyle": "default",
  11. 				"pullToRefresh": {  //下来刷新样式
  12. 					"support": true,
  13. 					"style": "default",
  14. 					"offset": "70px",
  15. 					"color": "#007AFF",
  16. 					"contentdown": {
  17. 						"caption": ""//下拉可刷新自定义文本
  18. 					}
  19. 				}
  20. 			}
  21. 		},

页面进行监听

  1. onPullDownRefresh(){
  2. 			// console.log('onpull')
  3. 			if(this.TabCur == 0){
  4. 				uni.stopPullDownRefresh()
  5. 				return
  6. 			}
  7. 			this.$nextTick(() => {
  8. 				this.$refs.approvalDate.getList();
  9. 				setTimeout(() => {
  10. 					uni.stopPullDownRefresh()
  11. 				})
  12. 			})
  13. 		},

如果还是不能实现，可以看看最后的那个文章，scroll-view和原生下拉刷新不能混动哦

7.实现分页（下拉下一页）

实现下拉下一页，主要就是下面这个监听回调-一旦到了底部，就page+1就行了

下面是实现得代码

  1. //触底继续下拉刷新
  2. onReachBottom() {
  3. 	this.getList();
  4. },
  5. methods:{
  6.             //获取列表
  7. 			async getList() {
  8.                  //是否为最后一页
  9. 				if (!this.isLastPage) {
  10. 					this.loading = true
  11. 					// console.log(this.policyParams, 'xxxx')
  12. 					let res;
  13. 					if (this.isAuth) {
  14. 						res = await policyApi.qryQList(this.policyParams)
  15. 					} else {
  16. 						res = await policyApi.qryList(this.policyParams);
  17. 					}
  18.  
  19. 					this.loading = false;
  20. 					if (res.list && res.list.length > 0) {
  21. 						this.favourable = this.favourable.concat(res.list);
  22. 						this.policyParams.pageNum = res.nextPage;
  23. 						this.isLastPage = res.isLastPage;
  24. 					}
  25. 				}
  26. 			}
  27. }

8.查看图片和富文本

主要是利用自带得两个api-uni.previewImage,uni.openDocument

  1.  
  2. export function searchPdf(url) {
  3. 	if (url.includes('jpeg') || url.includes('jpg') || url.includes('png')) {
  4. 		uni.previewImage({
  5. 			urls: [url],
  6. 			fail: () => {
  7. 				console.log("预览图片失败", JSON.stringify(err))
  8. 				uni.showToast({
  9. 					title: '预览图片失败',
  10. 					icon: 'none'
  11. 				});
  12. 			},
  13. 			success(index, tapIndex) {
  14. 				console.log("预览图片成功", index, tapIndex)
  15. 			}
  16. 		});
  17. 		return
  18. 	} else {
  19. 		uni.showLoading({
  20. 			icon: 'loading',
  21. 			title: '正在打开，请等待'
  22. 		});
  23. 		uni.downloadFile({
  24. 			url: url,
  25. 			fail: () => {
  26. 				uni.hideLoading()
  27. 				uni.showToast({
  28. 					title: '预览文件失败',
  29. 					icon: 'none'
  30. 				});
  31. 			},
  32. 			success: function(res) {
  33. 				console.log(res, 'res')
  34. 				var filePath = res.tempFilePath;
  35. 				console.log(filePath, 'folefasa',filePath)
  36. 				uni.openDocument({
  37. 					filePath: filePath,
  38. 					success: function(res) {
  39. 						console.log("预览文件成功", res)
  40. 						uni.hideLoading();
  41. 					},
  42. 					fail(err) {
  43. 						console.log("预览文件失败", err)
  44. 						uni.hideLoading();
  45. 						uni.showToast({
  46. 							title: '预览文件失败',
  47. 							icon: 'none'
  48. 						});
  49. 					}
  50. 				});
  51. 			},
  52. 		})
  53.  
  54. 	}
  55.  
  56. }

9.微信授权登录

超详细的uniapp实现微信登录功能_哆来A梦没有口袋的博客-CSDN博客_uniapp 微信登录

10.APP检测是否是最新版本号

检查最新版本号，一般是在App.vue的onLauch生命周期，获取版本号并检测是否是最新版本号吗，提示用户是否需要更新

  1. onLaunch: function() {
  2. 	let that = this
  3. 	//#ifdef APP-PLUS  
  4. 	plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
  5. 	//  获取 app的version
  6. 	let appversion = wgtinfo.version;
  7. 	// 调取接口查询版本号
  8. 	let url = 'http://222.180.163.242:9769'
  9. 	uni.request({
  10. 		url: `${url}/tsAdmin/wxApp/checkAppUpdate`,
  11. 		method: 'GET',
  12. 		success: (result) => {
  13. 		if (result.data.code == 'rest.success') {
  14. 		let info = result.data.result;
  15. 		// 版本号不一致
  16. 		if (info.versionText !== appversion) {
  17. 			uni.showModal({ //提醒用户更新  
  18. 				title: "更新提示",
  19. 				content: "已有新版本，请确认是否更新",
  20. 				success: (res) => {
  21. 					//点击确认
  22. 					if (res.confirm) {		
  23. //浏览器打开下载地址
  24. plus.runtime.openURL(`${url}/tsAdmin/wxApp/downloadApp?url=${info.path}`)	
  25. 										}
  26. 									}
  27. 								})
  28. 							}
  29. 						}
  30. 					},
  31. 					fail:(err)=> {
  32. 						console.log(err,'err')
  33. 					}
  34. 				})
  35.  
  36. 			});
  37. 			//#endif

11.分享

分享是常见的app的功能

官网对于分享的讲解很详细

uni-app官网

这里讲一下其他的分享 - 微信小程序分享

微信的button加一个open-type="share"，立即会实现分享功能，什么也不用写

  1. <button class="toshare-button" open-type="share">
  2. 	去分享
  3. </button>

这样子的分享，会分享当前页面，有微信的默认样子

点击会自动进入分享页面

但是其实有时候我们分享出去的页面，想跳转的并不是当前点击页面，应该怎么做

 可以监听点击分享

  1. onShareAppMessage(res) {
  2.        return { 
  3. 			      title: '分享注册就领现金红包，提现不设限，最高200元',
  4. 			      path: '/share/open'
  5. 			}
  6. }

这个时候在点击分享链接进入的就是path - share/open啦

12.H5中使用高德地图

uniapp使用H5高德地图_哆来A梦没有口袋的博客-CSDN博客

13. H5中高德地图实现uni.chooseLcation

H5实现高德地图的uni.chooseLocation_哆来A梦没有口袋的博客-CSDN博客

当然，uniapp还有一个小坑在里面。uniapp的那些坑_哆来A梦没有口袋的博客-CSDN博客_uniapp的坑有哪些 ，这篇博客写了在项目中遇到的一些问题

文章持续更新中

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/231401
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号