uniapp的安装与基础

发布时间:2022-12-04 VUE 小程序 UNI-APP 微信小程序

解释

  • 由dcloud 公司开发的 多端融合框架

  • 1次开发 多端运行

  • 竞品:apiCloud ,appCan ,Codova

  • 技术架构

    • Vue语法+小程序的api
  • Hybrid混合开发端

    • App端
      - HTML+
      - nvue(原生view)
      - native.js(js原生沟通的桥梁)
      - weex
      - 内置ios/安卓的模块使用
    • H5端
      - h5专用api
  • 各种小程序(微信为主)

准备工具

  • Hbuilderx (开发与编译工具)
  • 微信小程序开发工具(微信小程序预览测试)
  • 安卓模拟器/真机==>运行app

界面

在这里插入图片描述在这里插入图片描述在这里插入图片描述

新建项目

在这里插入图片描述

运行多端

H5

在这里插入图片描述在这里插入图片描述

小程序

01 打开开发工具的服务端口
在这里插入图片描述

02 HBuilderx配置 微信开发工具的地址
在这里插入图片描述在这里插入图片描述

03 配置微信小程序id
在这里插入图片描述

04 运行到微信小程序
在这里插入图片描述

App

01 打开模拟器或者手机
在这里插入图片描述

02 配置模拟器的端口
夜神模拟器端口号:62001
海马模拟器端口号:26944
逍遥模拟器端口号:21503
MuMu模拟器端口号:7555
天天模拟器端口号:6555
雷电模拟器端口号:5555
在这里插入图片描述在这里插入图片描述在这里插入图片描述

03 运行到模拟器
在这里插入图片描述注意项
hbuilder可能需要下载对应的插件
运行到安卓模拟器,有视图差别
运行可以需要一定的诗句

相关配置与vue语法

page.json中

在这里插入图片描述

尺寸单位

在这里插入图片描述

语法

在这里插入图片描述

组件

在这里插入图片描述

vue语法

模板语法

文本渲染

			<view class="title">文本渲染</view>
			<view>{{title}}</view>
			<view v-text="title"></view>
			<view>{{2+3}}</view>
			<view>{{title.length}}</view>
			<view>{{title.split("").reverse().join("")}}</view>
			<view>{{title.length>15?'长度很长':'字少事大'}}</view>
			<view v-html="str"></view>
			data() {
			return {
				title: '你好我是uni-app',
				num: 5, //定义num默认值是5
				str: "<strong>社会主义好</strong>呱呱好!",
			}
		},

条件渲染

			<view class="title">条件渲染</view>
			<view v-if="isLog">欢迎回来主人</view>
			<view v-else>请登录</view>

			<view v-show="isLog">欢迎欢迎</view>
			<view v-show="!isLog">新冠请走开</view>

			<view v-if="score>=90">奖励🚗</view>
			<view v-else-if="score>=80">送一辆🛵</view>
			<view v-else-if="score>=70">给🚲</view>
			<view v-else-if="score>=60">给你🛴</view>
		<view v-else>🚑 打了送医院</view>
		data() {
			return {
				isLog: true, //是否登录
				score: 55,
			}
		},

列表选项

  • 字符串,数字,列表,对象都可以遍历
  • <view v-for="(item,index) in list" :key="index">{{index+1}} {{item}}</view>
  • 一定要保证兄弟元素间的key值是唯一
			<view class="title">列表渲染</view>
			<view>--遍历列表</view>
			<!-- item与index自定义 in固定语法 list是data中的变量 -->
			<view v-for="(item,index) in list" :key="index+item">{{item}}</view>
			<view>--遍历对象</view>
			<view v-for="(value,key) in obj" v-bind:key="key">{{value}}</view>
			<view>--遍历数字</view>
			<view v-for="item in 5" :key="item+'s'">{{item}}</view>
			<view>--遍历字符串</view>
			<view v-for="(s,i) in title" :key="i+'d'">{{s}}</view>

属性绑定

<view class="title">属性渲染</view>
			<button type="primary" v-bind:disabled="isLog" @click="isLog=!isLog">按钮</button>
			<button type="warn" :disabled="!isLog" @click="isLog=!isLog">按钮</button>

表单绑定

			<view class="title">表单绑定</view>		
			<!-- 输入 -->
			<view>{{title}}-{{time}} - {{num}}</view>
			<!-- 通过:value属性实现对表单单向绑定 -->
			<!-- 通过v-model 对表单进行双向绑定(input启用) -->
			<!-- input默认是没有样式 -->
			<input placeholder="请输入..."  v-model="title"></input>
			<!-- 选择 -->
			<picker :value="time" mode="time" start="09:01" end="21:01"   @change="time=$event.detail.value" >
				<view class="uni-input">{{time}}</view>		
			</picker>
			<!-- 滑块 -->
			<slider :value="num"  step="5" @change="num=$event.detail.value" />
			data() {
			return {
				time:"12:01",,
				num: 5, //定义num默认值是5
			}
		},

事件

<view class="title">事件</view>
		<button v-on:click="num++" size="mini" type="primary">{{num}}事件绑定</button>
		<button @click="num++" size="mini" type="warn">{{num}}事件绑定-简写</button>
		<button  @click="say" size="mini" type="primary">响应函数</button>
		<button  @click="say('你好小小真')" size="mini" type="warn">响应函数-传参</button>
		<button type="primary" @click="doit" :data-title="title">事件对象</button>
		methods: {
			doit(e){
				console.log(e);
				uni.showModal({
					title:e.target.dataset.title
				})
			},
			say(str="你好"){
				uni.showToast({
					title:str
				})
			}
		},
		data() {
			return {
				num: 5, //定义num默认值是5
			}
		},

在uniApp页面

  • 新建页面
  • 页面配置在pages.json
    • globalStyle全局样式
    • 页面写了style 配置,那么用的配置覆盖全局的配置,默认页面的样式会应用全局样式
  • 页面pages
    • path页面路径
    • style 页面样式

vue选项

  • data数据
  • methods方法
  • computed计算
  • watch监听
  • directive指令
  • filter过滤

uniapp隐藏状态栏

  • 单个页面隐藏
    在页面onLoad() 函数中添加
// #ifdef APP-PLUS  
plus.navigator.setFullscreen(true);
// #endif

页面onUnload() 函数中添加

// #ifdef APP-PLUS  
plus.navigator.setFullscreen(false);
// #endif

备注:若在页面unLoad() 时未调用plus.navigator.setFullscreen(false);,将导致退出当前页面后其他所有页面的状态栏也都被隐藏了。

  • 整个应用隐藏
    App.vue中 onLaunch() 函数中添加
// #ifdef APP-PLUS      
plus.navigator.setFullscreen(true);//隐藏状态栏(应用全屏:只能隐藏状态栏,标题栏和虚拟返回键都还可以显示)
// #endif

备注:若在页面unLoad() 时未调用plus.navigator.setFullscreen(false);,将导致退出当前页面后其他所有页面的状态栏也都被隐藏了

uniApp的生命周期

Vue的生命周期

  • 创建
    beforeCreate
    created
    • 可以使用this,没有dom
    • 作用:
      1. 初始数据
      2. 注册监听事件
      3. 开启定时器
      4. ajax请求
  • 挂载
    beforeMount
    mounted
    • 可以操作dom(节点)
    • 作用:
      1. 操作dom
      2. ajax请求
  • 更新
    beforeUpdate
    updated
  • 卸载
    beforeDestroy
    destroyed
    • 作用:
      1. 移除事件监听
      2. 移除停止定时器

小程序的生命周期

  • onLoad加载
    • 能够获取页面的参数
    • 开启ajax,定时器,事件监听
    • 像vue的created
  • onShow显示
    • 播放媒体
  • onReady准备
    • 获取节点信息
    • 像vue的mounted
  • onHide 后台运行
    • 停止播放媒体
  • onUnload 卸载
    • 停止事件监听与定时器
onLoad() {
			console.log("onload");
		},
		mounted() {
			console.log("mounted");
		},
		onReady() {
			console.log("onReady");
		},
		onShow() {
			console.log("onShow");
		},

小程序的全局方法

  • onPullDownRefresh 下拉刷新
    onReachBottom()触底更新
    onShareAppMessage右上角分享
    onPageScroll页面滚动
    onShareTimeline分享到朋友圈
    获取笑话案例
<template>
	<view>
		<view v-for="(item,index) in list" :key="index">
			<view class="item">
				{{item.summary}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [], //存放笑话
				page: 1, //当前页
			}
		},
		created() {
			//初始化调用获取笑话
			this.getjok();
		},
		//下拉的时候
		//下拉刷新把数据添加到前面
		onPullDownRefresh() {
			//获取笑话
			this.getjok();
		},
		//触底刷新
		onReachBottom() {
			//触底更新把数据添加到后面
			this.getjok(2)
		},
		// param {Number] type = [1]1代表下拉刷新,2代表触底更新
		methods: {
			//获取笑话
			getjok(type = 1) {
				var that = this;
				uni.request({
					url: 'http://dida100.com/mi/list.php', //仅为示例,并非真实接口地址。
					data: {
						page: that.page
					},
					method: "GET",
					header: {
						'custom-header': 'hello' //自定义请求头信息
					},
					success: (res) => {
						// 02 更新数据list和page
						console.log(res.data);
						// concat是链接两个数组,list数据和result数组
						//为什么用concat?不用有别的方法
						 // concat就是连接两个数组,可以同push和splice_对数组讲行操作
						if(type===1){
							that.list = res.data.result.concat(that.list);
							uni.showToast({
								title:"更新"+res.data.result.length+"条数据",
								icon:"none"
							})
						}else{
							that.list = that.list.concat(res.data.result);
						}
						
						//更新page (方便下次请求)
						that.page++;
					},
					//成功获取或者失败都要停止下拉刷新
					complete() {
						//停止下拉刷新
						uni.stopPullDownRefresh()
					}
				});
			}
		}
	}
	//目标:展示笑话信息
	//方法请求笑话信息写在methods中 get3ok
	//方法在哪儿调用呢?created mounted生命周期调用get3ok
	//笑话分页:在data中定义存放笑话的变量List,存放当前页的page
	//在getJok中更新List和page实现更新视图
	//数据有哪些 data
	//方法有哪些 methods
	//怎么处理方法 更新数据 展示数据
</script>

<style>
	.item {
		padding: 30rpx;
		border-bottom: 1px solid #ccc;
	}
</style>
路由

路由组件

  • navigator导航
    • url 跳转页面的地址
  • open-type打开类型
    • navigate跳转
    • redirect重定向(当前页面不留历史记录)
    • navigateBack返回
    • relauch 重启
    • switchTab 跳转底部栏
		<button type="default" @click="goOption" size="mini">go选项</button>
		<button type="primary" @click="goIndex" size="mini">go index</button>
	<navigator url="../options/options?count=5&title=来自life">选项</navigator>
	<navigator url="../index/index" open-type="redirect">index页面(不会有返回按钮)</navigator>
	methods: {
			goOption(){
				//跳转并传参
				uni.navigateTo({
					url:"/pages/options/options?count=100&title=来自js跳转"
				})
			},
			goIndex(){
				//重定向
				uni.redirectTo({
					url:"/pages/index/index"
				})
			},

路由传参

  • 传递url:path?name=mumu&age=18
  • 接收onLoad(option){}
    option的值{name:"mumu",age:18}

路由api

  • uni.navigateTo({url})跳转
  • uni.redirectTo({url})重定向
  • uni.navigateBack()返回
  • uni.switchTab()底部栏切换
  • uni.reLaunch()重启

路由配置(底部栏)

"tabBar": {
		"color": "#777",  //文字颜色
		"selectedColor": "#ff557f",//选中文字颜色
		"list": [ // 2-5
			{
				"pagePath": "pages/index/index", //页面地址
				"text": "首页",//文本
				"iconPath": "/static/tabBar/index.png",//图标颜色
				"selectedIconPath": "/static/tabBar/indexed.png" //选中图标颜色
			},
			{
				"pagePath": "pages/life/life",
				"text":"生命",
				"iconPath": "/static/tabBar/categoryed.png",
				"selectedIconPath": "/static/tabBar/category.png"
			}
		]
	},
uniapp的uniapp navigateTo 点击无法跳转的问题

1、检查是否是跳转至TabBar页面,如果是TabBar页面,则需要用uniapp.switchTab进行跳转;
2、检查跳转路径是否写正确。
3、可以打印错误信息进行检查,具体如下面代码注释部分所示。

tapupdate(){
		this.updatetap = !this.updatetap
		//调取发布时存储的数据然后跳转页面并进行渲染...
		uni.switchTab({
			url:'../publish/publish',
			// fail (error) {
			//         console.log(error)
			//     }
		})
	}
uniapp本地存储和本地储存取值

需要注意:vue的本地存储方式, 小程序在浏览器测试时也可以实现, 但是在真机运行时不能实现

一.储存

uni.setStorage(object)
在这里插入图片描述uni.setStorageSync(key, data)

try{
    uni.setStorageSync('token', '123456')
} catch (e){
    //错误
}

二.获取

uni.getStorage(OBJECT)
从本地存储中异步获取对应可以对应的内容

uni.getStorageSync(key)
从本地缓存中同步获取指定key对应的内容

try {
    const value = uni.getStorageSync("token");
    if(value) {
        console.log(value)
    }
} catch(e){
    //错误
}

三.移除

uni.removeStorage(object)
从本地缓存中异步移除指定key

uni.removeStorageSync(key)
从本地缓存中同步移除指定key

try {
    uni.removeStorageSync('storage_key')
} catch(e){
    //错误
}

获取当前页面getApp

  • 01 在App.vue
    定义globalData:{num:100}
  • 02 要使用的页面获取app
    var app = getApp()
  • 03获取globalData的值
    onShow(){ this.num = app.globalData.num }
  • 04 更新globalData值
    addNum(){ app.globalData.num++; this.num = app.globalData.num }

获取页面栈getCurrentPages

  • 获取当前的页面栈,是一个数组(1-5)
    var page = getCurrentPages();

  • page[page.length-1] 获取当前页面的信息
    (不要去修改)
    uni.navigateBack({delta:page.length})

条件编译

目的:不同的平台展示不同特性与功能

  • 模板条件编译
<template>
	<view class="condition">
		<view>条件</view>
		<!-- H5手机页面中,提示用户<applet></applet> -->
		<!-- #ifdef H5 -->
			<view class="">H5:下载app,获取优惠卷</view>
		<!-- #endif -->
		<!-- #ifdef MP -->
			<view class="">wx:小程序用户优惠卷5元</view>
		<!-- #endif -->
		<!-- #ifdef APP -->
			<view class="">app 优惠卷5元 </view>
		<!-- #endif -->
		<view class="active">我是一行可爱的文字</view>
		<button size="mini" @click="say()">你好</button>
		<!-- #ifdef APP || MP-WEIXIN  -->
		<navigator url="/pages/condition/we">微信-App专有</navigator>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
	**js编译**
		methods: {
			say(){
				// #ifdef APP-PLUS
					uni.showModal({
						title:"你好App用户"
					})
				// #endif
				// #ifdef MP
				uni.showToast({
					title:"你好微信用户"
				})
				// #endif
				// #ifdef H5
				uni.showModal({
					title:"你好,手机用户"
				})
				// #endif
			}
		}
	}
</script>
**css条件编译**
<style>
	/* #ifdef APP-PLUS */
	.active{color: red;}
	.condition{
		padding-top: var(--status-bar-height);
		/* 状态栏(电量条高度) */
	}
	/* #endif */
	/* #ifdef H5 */
	.active{color: blue;}
	/* #endif */
	/* #ifdef MP */
	.active{color: aqua;}
	/* #endif */
</style>

条件配置pages.json

{
		"path": "pages/condition/condition",
		"style": {
			"navigationBarTitleText": "首页",
			"enablePullDownRefresh":false,
			"h5":{
				"titleNView": {
					"titleText": "我是h5"
				}
			},
			"app-plus": {
				"titleNView":false  //隐藏导航栏
			}
		}
	},
	// #ifdef MP-WEIXIN || APP
	{
		"path": "pages/condition/we",
		"style": {
			"navigationBarTitleText": "小程序独有页面"
		}
	},
	// #endif
uniApp组件的使用
  • 文件夹components/组件名/组件名.vue
  • 不需要导入可以在页面中直接使用
  • uni_modlues/components/组件名/组件名.vue
    (这种模式也是可以)
  • 定义组件
    .vue文件就是一个组件(vue是一致)
    在这里插入图片描述

组件的传参

  • 父传子: props
  • 父通过属性的方式传递个字组件
    <steper :value="d1" ></steper>
  • 子通过props接收
    props:{ // 接收参数value value:{ type:Number, //数字类型默认值为1 default:1, } }
  • 子组件可以使用
    this .count = this.value
  • 子传父 :事件 $emit
  • 子触发事件this.$emit("input",this.count)
  • 父监听事件更新值
    <steper :value="d1" @input="d1=$event"></steper>
    在这里插入图片描述v-model是简写
    <steper :value="d1" @input="d1=$event"></steper>
    <steper v-mdel="d1"></steper>

监听事件传参

在这里插入图片描述

全局传参:uni.$on

  • 全局发送事件
    uni.$on("事件名",事件值)
  • 全局监听(发送事件前已经注册监听)
    created生命周期
    uni.$on("事件名",$event=>{响应操作})

在这里插入图片描述

原生微信组件如何使用

  • wxcomponents存放插件
  • pages.json导入
    在这里插入图片描述在这里插入图片描述

uni-扩展组件

  • uni内置扩展组件-兼容多端
  • hello uniapp扩展组件网站
  • uni-countdown
  • uni-swiper-dot
  • uni-popup
  • uni-popup-dialog

uni-插件市场

uview
官网
uview的配置

在这里插入图片描述

Vuex的使用

创建store目录,在index.js文件中导入vuex

// 导入vuex
import Vuex from 'vuex';
//导入vue
import Vue from 'vue';

// 使用Vuex
Vue.use(Vuex);
//导出Vuex
export default new Vuex.Store({
	//状态
	state:{
		gTitle:{
			text:"你好vuex",
			color:"#000",
			fontSize:"24px",
			background:"#f70"
		},
	},
	//改变状态的唯一方法
	mutations:{},
	//异步api操作
	actions:{},
	//内部计算
	getters:{},
	//模块
	modules:{},
})

在main.js中定义全局$store

//导入vuex
import store from './store/index.js'
//导入定义全局$store
Vue.prototype.$store = store;

在这里插入图片描述通过vuex监听改变颜色
在这里插入图片描述

在这里插入图片描述

图片api

图片上传api

<view>图片操作</view>
		<view class="">选择与预览图片</view>
		<button @click="selectPic">选择</button>
		<view v-for="item in list" :key="item">
			<image :src="item" mode=""></image>
		</view>
<script>
	export default {
		data() {
			return {
				list: [],
			}
		},
		onLoad() {},
		methods: {
			selectPic() {
				var that = this;
				//选择图片
				uni.chooseImage({
						count: 3, //默认选3张
						success(res) {
							//遍历结果
							for (let i = 0; i < res.tempFilePaths.length; i++) {
								//上传图片
								uni.uploadFile({
										//上传地址
										url: 'http://520mg.com/ajax/file.php',
										//图片信息
										filePath: res.tempFilePaths[i],
										// name需要和后端约定,默认都会叫file
										name: 'file',
										success:result => {
											//转换为json
											var data = JSON.parse(result.data);
											//添加域名后加入list
											that.list.push("http://520mg.com"+data.pic);
											}
										})
								}
								//上传到服务器
							}
						})
				}
			}
		}
</script>

微信小程序分享

  • 分享准备
    manifest.json模块配置Share
    在微信开发平台注册获取appid
    https://open.weixin.qq.com/在这里插入图片描述
    onShareAppMessage(){}
    分享给好友
    onShareTimeline(){}
    分享到朋友圈
<template>
	<view>
		<view class="title">分享</view>
		<!-- #ifdef MP -->
		<button open-type="share">分享</button>
		<!-- #endif -->
		<button type="primary" size="mini" @click="shareIt">分享得积分</button>
	</view>
</template>

<script>
	export default {
		//特别提醒在小程序中,没有这两个生命周期,页面默认没有分享功能
		onShareAppMessage() {
			//分享
			return{
				title:"送你鸽子",
				path:"/page/global/global",
				imageUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Ff%2F57a42b9002e19.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672453197&t=f36363af4b6ce3847fffb420d9a4fee5"
			}
		},
		onShareTimeline() {
			//分享到朋友圈
			return{
				imageUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Ff%2F57a42b9002e19.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672453197&t=f36363af4b6ce3847fffb420d9a4fee5"
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			//特别注意
			//实现分享,打包上传的时候
			//第一步,打开 manifest.json -> App模块权限配置,勾选 Share(分享);
			//第二步,通过 https: // open.weixin. qq.com/注册获取分享id(默认用的huilder的id)
			shareIt(){
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession", //微信聊天
					type: 0,
					href: "http://didia100.com",
					title: "好书分享",
					summary: "白鸽",
					imageUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Ff%2F57a42b9002e19.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672453197&t=f36363af4b6ce3847fffb420d9a4fee5",
					success: function (res) {
						//判断分享成功可以给积分
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			}
		}
	}
</script>

<style>

</style>

图片预览与app真机分享

<template>
	<view>
		<view>图片操作</view>
		<view class="">选择与预览图片</view>
		<button @click="selectPic">选择</button>
		<view v-for="item in list" :key="item" @click="preview(item)">
			<image :src="item" mode=""></image>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [],,
			}
		},
		onLoad() {},
		methods: {
			preview(item){
				var that = this;
				//单击通过实现预览
				uni.previewImage({
					//预览的图片列表
					urls:this.list,
					current:item, //当前图片
					longPressActions:{
						//定义长按的按钮
						itemList:['发送给朋友','保存图片','收藏'],
						success:function(data){
							console.log('选中了第'+(data.tapIndex+1)+'个按钮,第'+(data.index+1)+'张图片');
							// 保存
							if(data.tapIndex==1){
								//保存到本地相册
								uni.saveImageToPhotosAlbum({
									filePath:that.list[data.index],
									success() {
										uni.showToast({
											title:"保存成功"
										})
									}
								})
							}
							//分享
							if(data.tapIndex==0){
								//分享给朋友(app打包时候分享要去微信的开发平台注册)
								uni.share({
									provider:'weixin',
									scene:'WXSceneSession',
									type:2,
									imageUrl:that.list[data.index],
									success:function(res){
										console.log("success:"+JSON.stringify(res));
										
									},
									fail:function(err){
										console.log("fail:"+JSON.stringify(err));
									}
								})
							}
						},
						fail:function(err){
							console.log(err.errMsg);
						}
					}
				})
			},
			}
		}
</script>
<style>
</style>

更多相关推荐


【Vue】条纹进度条

发布时间:2022-10-28 VUE CSS3
一、效果演示及使用 作为组件引入到项目(引入地址修改为自己实际的存放地址),注册到componentsimportstripeloadingfrom"@/components/LSUI/loading/stripeloading";components:{  stripeloading }, 使用组件&lt;stripeloading:width="300":height="40":process...

在Vue中引入bootstrap框架

发布时间:2019-04-27 VUE BOOTSTRAP
基本介绍:都知道,bootstrap框架基于jQuery,因此,想要使用bootstrap框架,就得先引入jQuery...1.第一步,引入jQuery。在项目根目录下,使用命令:npminstalljQuery-s打开项目下的文件夹build中的webpack.base.conf.js文件,在文件开头添以下代码:varwebpack=require('webpack')然后在webpack.ba...

微信小程序 javascript MD5 支持汉字

发布时间:2022-11-23 UNIAPP 算法 JAVASCRIPT 微信小程序 前端
今天白天搞完RSA,晚上回来没啥 事,这破疫情真的把人快木乱了,又要封三天。。特奶的,这样下去,不是我要被封而是我要快疯~~~~!!!!!回到家,看着我的小棉袄在那里认真的学习,又看到我置满IT书籍的书架,拿起一本,三分钟就看完,换一本又看完,大抵是我真的太优秀了。。每目三书,不求甚解。。。就又看到小程序了。。。来吧,写个小页面,玩玩手,练练经验。。。好久没写了。。。调用公开三方接口的时候,MD5...

Vue学习之 --- 过滤器的用法

发布时间:2022-11-24 VUE.JS 学习 VUE JAVASCRIPT
过滤器的作用1.是Vue为开发者提供的功能函数,常用于文本的格式化。可以用在2个地方:插值表达式v-bind属性绑定过滤器应该添加在js表达式的尾部,有“管道符”进行调用。Vue3.0版本不着重过滤器。&lt;scriptsrc="../lib/vue.js"&gt;&lt;/script&gt;&lt;divid="app"&gt;&lt;p&gt;message的值是:{{message|Up...

uni-app 103退出和解散群聊(一)

发布时间:2021-11-08 UNI-APP
route.js//删除并退出群聊router.post('/group/quit',controller.group.quit);app/controller/group.js'usestrict';constController=require('egg').Controller;classGroupControllerextendsController{//获取群聊列表asynclist()...

16 子组件和父组件之间传值

发布时间:2019-09-01 COMPONENT组件间传值 VUE
划重点子组件/父组件定义组件中:props的使用组件中:data的使用(有return返回值);区别:Vue中的data(没有返回值);组件方法中emit的使用:emit:英文原意是:触发、发射的意思components:直接在Vue的方法中声明和绑定要使用的组件小炒肉:温馨可口&lt;!DOCTYPEhtml&gt;&lt;htmllang="en"&gt;&lt;head&gt;&lt;met...

uniapp保存图片到相册

发布时间:2022-09-02 JAVASCRIPT UNI-APP
uni.saveImageToPhotosAlbum({               filePath:‘图片地址’,               success:function(){                  uni.showToast({                     title:'已保存',                     duration:2000       ...

wx小程序图片和base64相互转换

发布时间:2020-12-29 微信小程序 小程序
文章参考小程序图片转Base64,方法总结。微信小程序base64格式图片的显示及保存将本地图片转为base64同步方法——wx.getFileSystemManager().readFileSyncwx.canvasToTempFilePath({canvasId:'photo_canvas',success:function(res){letsBase64='data:image/jpeg;b...

Vue的跨域问题

发布时间:2018-12-20 VUE 前端 PHP YII2.0
有不少刚学Vue的童鞋们可能会遇到请求Api接口时出现跨域的问题(也会有运气好没有遇到的),这篇文章仅供参考,这是在询问了前端的朋友后写的。解决前端跨域的问题有两种情况,一个是开发环境,另外一个是线上生产环境。目前开发环境的跨域问题还没有解决,有知道的童鞋麻烦告知一声。只知道要配置服务器代理,但是按照网上的教程配置完后还是没有效果,求大神告知。另外一种情况是线上生产环境使用cors解决跨域的问题。...

vue监听器使用笔记

发布时间:2022-11-19 VUE.JS JAVASCRIPT VUE 前端
1.year是你监听的属性的属性名。2.vule是这个属性发生改变后的值。3.可以在{}里面去写剩下的业务逻辑代码。4.this.$emit("input",this.getTimeStr()); 是触发父组件的input事件(一般是来封装父组件的v-model时写的事件名),参数 :this.getTimeStr() ,是一个方法,这也可以可以是值。watch:{year(value){this...

vue antd中的select用法

发布时间:2022-11-14 VUE ANTDDESIGN JAVASCRIPT VUE.JS 前端
1、基本用法&lt;a-selectv-model:value="value1"style="width:120px"&gt;&lt;a-select-optionvalue="jack"&gt;Jack&lt;/a-select-option&gt;&lt;a-select-optionvalue="lucy"&gt;Lucy&lt;/a-select-option&gt;&lt;a-selec...

【Vue3】在Vue项目中如何使用svg-icon组件(Webpack)

发布时间:2022-11-24 VUE.JS VUE JAVASCRIPT WEBPACK
Vite实现安装插件npminstallsvg-sprite-loader-D//或者yarnaddsvg-sprite-loaderpackage.jsonps:^的意思是大版本,就是6不变。~的意思是小版本,也就是第二位0,不变。此处指的是在node升级等方面的问题下载图标(svg格式)目录:src/assets/icons/svg/scan.svg用到的是腾讯codesign,其他平台也能进...

vue 文件上传之后自动删除组件文件

发布时间:2022-08-29 VUE TYPESCRIPT
vue文件上传之后自动删除组件文件场景:ele-ui文件上传组件,在文件第一次上传之后,不能自动删除文件,导致第二次上传文件无反应解决:this.$refs.refUploadFile.$data.uploadFiles=[];...

【Vue3】Vue3+Vite前端在组件中直接使用svg图标icon(实现设计稿的icon解决方案)

发布时间:2022-11-24 VUE JAVASCRIPT VITE VUE.JS 前端
webpack实现下载icon图标(svg格式)用到的是腾讯codesign,其他平台也能进行svg图片的下载放入项目svg中如何控制图标颜色如下图控制svg颜色的是fill参数,此处可以删除掉,保证添加后和同级文字样式统一引入插件在vite.config.ts中引入插件vite-plugin-svg-icons官方文档:https://github.com/vbenjs/vite-plugin-...

Vue脚手架搭建项目【小白看了都会】

发布时间:2022-11-20 VUE.JS VUE 前端
目录一、环境准备1、先安装node.js2、安装淘宝的镜像二、开始搭建vue1、检查脚手架是否安装 2、创建项目 vuecreateproject 3、选择项目的配置项 4、启动项目先附上重点步骤截图一、环境准备1、先安装node.js下载node.js的安装和全局配置参考:nodejs的安装和全局配置(超详细哦)_不甜呐的博客-CSDN博客2、安装淘宝的镜像在cmd中输入:npminstall-...

vue 日历签到组件

发布时间:2022-11-25 VUE.JS VUE 前端
vue写好的组件,直接安装npminstallvue-checkin--save,github地址  GitHub-hasbug/vue-checkin或者自己写,如下新建vue-checkin.vue,里面写&lt;template&gt;  &lt;divclass="content-pageuk-body"&gt;    &lt;divclass="calendar"&gt;      &l...

java python校园外卖盲盒订单uniapp小程序系统

发布时间:2022-09-26 SSM JAVA 小程序 UNI-APP
功能介绍将系统权限按管理员和用户这两类涉及用户划分。(a)管理员;管理员使用本系统涉到的功能主要有:个人中心、用户管理、盲盒分类管理、外卖盲盒管理、订单管理、系统管理等功能(b)用户进入系统前台可以实现首页、我的、外卖盲盒、闲置盲盒等功能。随着信息技术和网络技术的飞速发展,人类已进入全新信息化时代,传统管理技术已无法高效,便捷地管理信息。为了迎合时代需求,优化管理效率,各种各样的管理系统应运而生,...

Tauri 引入element-plus

发布时间:2022-11-19 VUE.JS TAURI JAVASCRIPT VUE 前端
1、安装element-plusnpminstallelement-plus--save2、Vue3的main.js引入elementimport{createApp}from"vue";import"./style.css";importrouterfrom'./router'//importAppfrom"./App.vue";//这里importElementPlusfrom'element...

蜂鸟视图空间数据中台实现智慧养老,“技术+创新”焕发养老新生态

人口老龄化第七次人口普查数据显示,我国60周岁及以上的人口已达到2.64亿,占总人口的18.70%,其中,65周岁以上的有1.91亿,占比已超过13.50%。全国31个省份中有16个省份65岁及以上人口超过500万人,其中,有6个省份的老年人口超过1000万人,老龄化严重的地区甚至超过30%,预计到2050年,中国老年人口将增至5亿人左右。我国人口老龄化呈现“基数大、增速快、空巢多、高龄化”等特征...

蜂鸟视图空间数据中台在实现数字化变革之下,如何高效管理海量空间数据?利器来了

据不完全统计,我们日常接触的数据有80%与空间信息相关。例如出行时用到的导航、打车、共享单车等APP,都会实时展示当前所处空间位置的相关信息。就个体而言,我们只需要了解自己关注的少量数据就够了。然而站在管理者的角度,需要充分了解空间内全局数据,进而做出正确的管理决策。空间可视化管理概念空间可视化管理是指利用大数据可视化技术,让管理者有效掌握企业内空间信息,实现管理上的透明化与可视化,这种管理手段可...

利用蜂鸟视图空间数据平台

产业园区作为一座现代化城市里的最小单元,是城市梦想的聚集地,是高新技术产业的集中研发地,也是中国经济转型升级和创新发展的核心主力。园区的覆盖区域越来越大,产值越来越集中,对于园区及内部楼宇的数字化建设和可视化管理诉求也愈加强烈。大数据、物联网、空间可视化等前沿技术的落地发展,也让园区的精细化、智慧化管理成为了可能。“空间数据平台”源于蜂鸟视图技术探索和建设实践,以及基于在室内空间领域积淀的多年经验...

【无标题】

发布时间:2022-06-27 SPRINGBOOT VUE.JS WEB端 JAVASCRIPT VUE
web端进行数据懒加载前端vue,后端springboor,数据库Oracle页面形状设计思路,滚轮划到最底端时候,从数据库加载数据和分页操作类似,一页一页获取数据数据量太大,分散数据,达到查询速度快Oracle查询数据,rownom处理,采用双层sql,提高开始查询效率数据量太多,提供按名字模糊搜索匹配前端代码html部分js部分后端代码采用jpa这一套方法,加上自己一些代码封装...

2021-10-11

发布时间:2021-10-11 VUE.JS VUE JAVASCRIPT
vue的watch监听1,监听的数据是对象内的某一属性,直接watch对象的属性就会报错处理方法:监听对象内的某一具体属性,可以通过computed做中间层来实现computed:{  channel(){    returnthis.people.phone  }},watch:{channel(newValue,oldValue){    console.log(‘new:%s,old:%s’...

小程序iPhonex适配

发布时间:2022-10-31 微信小程序
1&lt;!--小程序在app里面写是否判断他是IPhoneX--&gt;2wx.getSystemInfo({3success:function(res){4if(res.model.indexOf('iPhoneX')!=-1){5that.globalData.isIphoneX=true//不等于-1就是----6}7}8}) 910globalData:{1112isIphoneX:fa...

vue computed、watch、methods方法的区别

发布时间:2020-04-19 WATCH COMPUTED METHODS VUE
computedVSmethodscomputed:computed带缓存,只有依赖的属性改变时候才会重新计算.computed中的成员可以只定义一个函数作为只读属性,也可以定义get/set变成可读写属性,这点是methods中的成员做不到的methods:在重新渲染的时候,函数总会重新调用执行。可以说使用computed性能会更好,methods里的函数每次调用的时候都执行一遍(假如定义的方法...

滑动置顶

发布时间:2019-07-24 VUE JS
&lt;divclass="top"ref="topH"&gt; &lt;divclass="item":class="{active:current===index}"v-for="(item,index)intablist"@click="addClass(index)"&gt;{{item.title}}&lt;/div&gt; &lt;/div&gt; &lt;divclass="...

vue组件通信的 5 种方式

发布时间:2022-11-10 VUE 前端
1.props/$emit父组件通过props向子组件传递数据,子组件通过$emit和父组件通信(1)父组件向子组件传值(props的用法)props的特点:props只能是父组件向子组件进行传值,props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父组件的更新而响应式更新。props可以显示定义一个或一个以上的数据,对于接收的数据,可以是各种数据类型,同样也可以是传递一个函数。p...

小程序DAY1

发布时间:2022-11-13 微信小程序 小程序
微信小程序目录介绍 app.js():注册小程序。接受一个 Object 参数,其指定小程序的生命周期回调等。App()必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果app.json():JSON扮演的静态配置的角色。页面路径,窗口属性在这里配置。不能有注释。  pages:页面路径。window:窗口默认形式。tabBar:底部tab栏的表现networktime...

Vue2.x 核心基础(匿名插槽,组件-插槽_默认内容,具名插槽,作用域插槽)

发布时间:2022-01-21 VUE.JS JAVASCRIPT VUE 前端
问题1:组件里的数据不确定可以怎么做?问题2:组件里的标签不确定怎么办呢?组件插槽1.匿名插槽目标:通过slot标签,让组件内可以接收不同的标签结构显示语法口诀:组件内用&lt;slot&gt;&lt;/slot&gt;占位使用组件时&lt;Pannel&gt;&lt;/Pannel&gt;夹着的地方,传入需要的标签替换slot问题1:使用我封装组件的人,不给slot传标签,怎么办?问题2:可否设...

一些antD和vue使用时的心得

发布时间:2022-09-28 VUE.JS VUE
1.&lt;a-select:value="appname==''?undefined:appname"placeholder="value不等于undefinedplaceholder不显示"&gt;&lt;/a-select&gt;2.&lt;a-tooltipoverlayClassName="detailInformation"&gt; scoped要去掉,否则style不生效&lt;/a...

一些项目配置

发布时间:2022-09-28 VUE JAVASCRIPT 开发语言 WEBPACK
vue.config.js:module.exports={ publicPath:"./", outputDir:"traceweb",//打包名称 configureWebpack:config=&gt;{ //取消console.log config.optimization.minimizer[0].options.terserOptions.compress.drop_console=...

uni-app修改代码,微信开发者工具不更新

发布时间:2022-11-25 UNI-APP
经过:在页面上写代码(HTML部分),无论如何,微信开发者工具显示页面都不更新,尝试过刷新热加载开/关重新进入小程序关闭微信开发者工具,重启调整通用设置详情-本地设置移走unpackage,再使用npmrundev:mp-weixin以上种种都不行,最后,我尝试用HBuilder里面的打开,点击运行到微信开发者工具,居然可以了…我确实不知道为啥,先这样记录一下吧...

OUC软件开发实验2

实验2:天气查询小程序本实验来自于周文洁老师的《微信小程序开发实战》第五章。主要介绍使用小程序网络API的相关应用制作一款天气查询小程序。学习目标为:1、掌握服务器域名配置和临时服务器部署;2、掌握wx.request接口的用法。注意事项:1、本实验中,需要使用和风天气API,需要注册用户,大家请自行阅读和风天气官方文档:https://dev.qweather.com/docs/api/weat...

OUC软件开发实验3

发布时间:2022-08-20 小程序 微信小程序 软件开发实验
实验3:视频播放小程序本实验来自于周文洁老师的《微信小程序开发实战》第六章。主要内容是使用小程序媒体API制作一个视频播放小程序,视频素材来自于某高校档案馆的《口述校史》栏目,它录制了多位耄耋之年的老教工回忆工作时期对大学的印象。本实验的学习目标:1、掌握视频列表的切换方法;2、掌握视频自动播放方法;3、掌握视频随机颜色弹幕效果。一、实验目标1、掌握视频列表的切换方法;2、掌握视频自动播放方法;3...

小程序,大局气,一文解读微信小程序

发布时间:2019-08-13 互联网 小程序 软件开发
2003年,伴随着淘宝的上线,人们的消费习惯开始改变,中国的商业模式也随之改变,互联网经济开始了高速发展;2009年,新浪微博的出现,改变了人们的社交形态;2012年,微信的诞生,改变了人们的交流习惯;次年,微信公众号上线,改变了互联网媒体行业的格局,人们渐渐将公众号作为获取最新资讯的首选渠道;2017年1月9日,微信小程序正式上线。什么是微信小程序呢?众所周知,小程序是指微信公众平台小程序,小程...

vue(7)条件渲染v-if和v-show

发布时间:2021-06-29 HTML PYTHON JAVA VUE JS
v-if在模板中,可以根据条件进行渲染。条件用到的是v-if、v-else-if以及v-else来组合实现的。示例代码如下:&lt;divid="app"&gt;&lt;pv-if="weather=='sun'"&gt;今天去公园玩!&lt;/p&gt;&lt;pv-else-if="weather=='rain'"&gt;今天去看电影!&lt;/p&gt;&lt;pv-else&gt;今天哪儿...

使用vs code拉取远程仓库

发布时间:2022-11-23 VUE 开发语言 PYTHON
首先哈,咱们先去创个文件夹搞个vue脚手架,你去vscode 创建也可以,我是习惯直接在文件夹搞起,再打开。然后咱就好啦,打开此文件夹--右键选第二个打开  咱们再到gitee创建个仓库  直接复制就好了啊   回到咱们的gitbush里首先init一个仓库 再拉取gitremoteaddorigin 链接拉取完咱们可以把vue推送到仓库里,gitpushoriginmaster 就完成啦!!!!...

Echarts折线图超出上下警戒线标红显示

发布时间:2022-11-04 ECHARTS VUE 前端
效果图如下:超出警戒线标红显示就是设置visualMap视觉映射组件,写在setOption内,和series并列,同级。visualMap具体属性请查看Echarts官网介绍:https://echarts.apache.org/zh/option.html#visualMap主要代码如下:visualMap:{precision:10,//小数精度show:false,//标签是否显示piec...

浅谈.Net异步编程的前世今生----EAP篇

发布时间:2021-10-31 ANDROID PYTHON 多线程 JAVA VUE
前言在上一篇博文中,我们提到了APM模型实现异步编程的模式,通过使用APM模型,可以简化.Net中编写异步程序的方式,但APM模型本身依然存在一些缺点,如无法得知操作进度,不能取消异步操作等。针对这些缺点,微软在.Net2.0中提出了基于事件的异步模式,简称为EAP模型。第二个异步编程模型:EAP概述EAP,全称Event-basedAsynchronousPattern,基于事件的异步模式,它提...