前言

  • 最近搞uniapp玩玩，先整个快速入门。

安装

  • 下载dcloud那一套东西，这玩意安装包要通过他那个编辑器上插件装，虽然感觉很不舒服，但插件市场可以方便的导入别人写的包弥补了这个让人不舒服的地方。
  • 另外还有为啥要用他那个编辑器呢，因为他这个应该是把插件还有loader之类的安装到了他编辑器下面，也就是说，本来npm -g的玩意优先装到他编辑器文件夹下，然后调用时优先在他编辑器下面找，相当于全局安装了，而不需要每次安装。
  • 其次链接微信小程序时，需要把微信小程序的端口打开，使得其可以调用微信小程序开发工具。
  • 另外初次使用还要在编辑器里设置微信小程序开发工具的地址。
  • 他也可以用vue-cli做，但是某些功能比如云函数方面会比较麻烦。

入门

  • 可以直接点击新建项目，有些模板让你选，先看一下uniui+勾选云开发的。
  • 在项目下会有个cloudfunctions的文件夹，右键可以创建云空间，那些都是要自己注册认证之后搞得，这玩意使用跟云函数没太大区别。如果要使用unicloude必须使用其编辑器开发。
  • 然后下面是components文件夹，里面内置了uni的组件。
  • components的组件文档：
  • https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge
  • https://uniapp.dcloud.io/component/README
  • 比如我们要使用badge，就可以直接写个uni-badge即可，不需要整引入。
<uni-badge text="1"></uni-badge>
  • static文件夹下的东西甩进去就会直接copy到小程序对应的文件夹。
  • 最下面有个page.json，对应的则是小程序的app.json。
  • uniapp.scss就是uniui的主题设置。
  • 我们可以先配置个页面出来：
"pages": [{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "uni-ui基础项目"
		}
	},{
		"path": "pages/login/login",
		"style": {
			"navigationBarTitleText": "登录页"
		}
	}],
  • 然后对pages文件夹右键选择新建页面（别的框架代码操作，这玩意直接右键，也算是增强了这方面功能），新建页面中选择使用scss以及同名文件（感觉和小程序规定一样比较好，taro是要一样的）。
  • 在index中试着写个跳转，以及修改button的样式：
<button class='btn-my' @click="moveto">kkk</button>
<style lang='scss'>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
		.btn-my{
			color:blue;
			background:red;
		}
	}
</style>
methods: {
			moveto(){
				uni.navigateTo({
					url:'../login/login',
					success(){
						console.log('cc')
					}
				})
			}
		}
  • 如果报没有scssloader就装插件
  • 如果小程序报appServiceSDKScriptError就需要在manifest.json中输入个appid。
  • 这编辑器编译有时候会有问题，如果有问题，需要关了重开，小程序开发工具也是这样。
  • 样式符合预期工作即可。

条件编译

基本语法

  • 就是vue那些，都写一下方便查询。
  • 循环：
<template>
	<view >
		<view v-for="(item,i) in list" :key={i}>
			 {{item}}
		 </view>
		{{list}}
		<view v-for="(item,i) in list2"  :key={i}>
			<view > 
				<text>{{item.name}}</text>
					<text>{{item.age}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[2,1,3,4,5,56,7],
				list2:[{
					name:'xx',
					age:'122'
				},{
					name:'kk',
					age:'99'
				}
				]
			};
		}
	}
</script>
  • 条件渲染：
<template>
	<view>
		<view>hello</view>
		<button @click="change">change</button>
		<view v-if="show">
			{{show}} 
		</view>
		<view v-else>
			else show
		</view>
		<view>
			{{show?'show':'else show'}}
		</view>
		<view v-show="show">
			show
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:true
			}
		},
		methods: {
			change(){
				this.show=!this.show
			}
		}
	}
</script>
  • 父组件传子组件：
<pass-params parentParams='xxx'>
			<view>父亲传来的孩子</view>
		</pass-params>
<template>
	<view>
		<slot></slot>
		<view>
			父亲传来的参数：
			{{parentParams}}
		</view>
	</view>
</template>
<script>
	export default {
		props:{
			parentParams:{
				type:String,
				default:''
			}
		}
  • 子组件传父组件：
<button @click="toParent"> toparent</button>
data() {
			return {
				childrenParams:'children'
			}
		},
		methods: {
			toParent(){
				this.$emit('toparent',this.childrenParams)
			}
		}
<pass-params parentParams='xxx' @toparent='receive' >
			<view>父亲传来的孩子</view>
		</pass-params>
methods: {
			moveto(){
				uni.navigateTo({
					url:'../login/login',
					success(){
						console.log('cc')
					}
				})
			},
			receive(e){
				console.log(e)
			}
		}