【使用uni-app开发非原生小程序微信/支付宝小程序】冲天香阵透长安,满城尽带黄金甲。这篇文章主要讲述使用uni-app开发非原生小程序微信/支付宝小程序相关的知识,希望能为你提供帮助。
@[toc]
一,前言因为各种原因,摆烂了一段时间,最近稍微调整了一下心态,不管怎样,学习还是要继续的。
我们已经对移动端的APP非原生开发了然于胸了,我们下面来进军一下小程序领域。
众所周知,微信小程序有它自己的一套语法,但是丝毫不影响我们的uni-app对其的兼容。
二,uni-app是什么?大体介绍一下:
uni-app是统一的意思,它的特点非常的强大,使用Vue.js开发所有前端应用的框架可发布到ios、android、Web(响应式)、以及各种小程序、快应用等多个平台。
文章图片
三,配置设置介绍我们创建完一个demo之后,使用uni-app初始化模板,会生成一个大文件,下面的pages里存放我们的小程序页面设置。static存放静态文件。
下面的manifest.json为项目总体配置文件。
app.vue,应用入口文件,和小程序app.js类似。
main.js,应用入口文件,注册Vue等等。
pages.json,json文件,页面相关的配置文件。自动生成。全局配件等等。
uni.scss,全局的scss文件,全局scss变量。
我们需要创建一个common文件,作用就是存放公用的文件。
之后再创建一个components,这个作用就是自定义组件目录。
创建一个store文件。vuex目录
文章图片
四,模板语法学习基本层次为:
<
template>
<
/template>
<
script>
<
/script>
<
style>
<
/style>
上述标签为:
模板层,脚本层,样式层。
4.1 v-bindv-bind的作用是:
组件属性要使用data中定义的数据变量。或者表达式,必须使用v-bind。
例子:
<
view v-bind:class="title">
hello
<
/view>
<
script>
export default
data()
return
title: Hello,
onLoad()
,
methods: <
/script>
文章图片
我们观察上图,使用了v-bind,可以引用data中定义的数据变量。
4.2 绑定事件v-on
<
button v-on:click="show">
上进小菜猪<
/button>
上述代码解释:
写了应该按钮,获取到用户点击,实现点击绑定的需求。
methods:
只要是自定义的函数方法,必须写到methods里。
我们写一个js控制台输出。
methods:
show()
console.log(你好上进小菜猪);
查看效果:![在这里插入图片描述](https://s4.51cto.com/images/blog/202206/03144144_6299ad28ae96c4297.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)
心得:
1,v-bind可以简写为:
2,v-on可以简写为@
br/>![在这里插入图片描述](https://s4.51cto.com/images/blog/202206/03144144_6299ad28ae96c4297.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)
心得:
1,v-bind可以简写为:
2,v-on可以简写为@
文章图片
4.3 export default data()
data()是初始化数据。data一般不定义为对象。
title: Hello,
arr:[1,2,3],
flag:true.
这里支持各种类型的变量。
onLoad()
时间控制器:
onLoad()
setTimeout(()=>
this.msg=this.msg+上进小菜猪
,2000);
,
如上述代码,写到onLoad函数里,到2s之后,讲msg字符串加上进小菜猪,显示带页面中。
文章图片
4.4 双向绑定 v-model下面写了应该输入框,让msg发送变化,改变data里的值,导致v-bind样式值发生变化。
<
view :class="msg">
msg
<
button @click="show">
上进小菜猪<
/button>
<
input v-model="msg"/>
<
/view>
主要是 v-model=" msg" 。
文章图片
本文就到这里,下篇写条件判断,列表渲染等功能介绍。
文章图片
推荐阅读
- #导入Word文档图片# Linux下automake工具使用(自动构建Makefile文件)
- 小程序开发快速上手快速入门篇
- 全流程分析Netty设计思路与实践
- 硬件开发笔记(硬件开发基本流程,制作一个USB转RS232的模块:设计原理图)
- Redis底层与5大数据类型
- 防火墙基础之单臂路由和DHCP接口地址池的配置
- 3分钟带你搞懂Vue双向绑定原理及问题剖析
- SpringBoot和@Aspect实现自建Log日志功能
- 路由基础之链路聚合和DHCP全局的地址池的配置