小程序初体验(原生)

217 阅读2分钟

在微信上一直享受着vx小程序带来的那种方便以及快捷的体验---从各大商城的小程序,小游戏,甚至是粤康码等等都是由一定的工具开发完成的。

上手难吗?和vue有可比性吗?抱着这个疑问,一起来慢慢看吧~

1.为啥选择小程序

1 微信用的人多,而且粘性很高,在微信里开发产品更容易触达用户

2 推广app 或公众号的成本太高

3 开发适配成本低(适配!)

4 容易小规模试错,然后快速迭代

2.搭建小程序环境

1.上vx平台进行注册

2.邮箱激活

3.信息登记

4.下载vx小程序开发工具

5.扫码登录进行开发

image.png

6.新建的时候需要填写自己的appid和不要勾选云开发(会多后端的东西出来)

image.png

进去之后的基本布局以及页面:

image.png

和vsc有异曲同工之妙,那么和web对比呢?

3.与web对比

结构方面: HTML-----WXML

样式方面: CSS------WXSS

逻辑方面:大家都是js

配置:传统web是没有的,而小程序有个JSON

4.里面配置好的目录详情

image.png

!注意:全局配置--app.json

页面的配置只能设置 app.json 中部分 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项

5.体验语法

1.数据渲染

普通变量

image.png

动态变量

image.png

三元表达式

image.png

2.条件渲染(在这里记得要区分v-if和v-show)

wx:if

image.png

hidden

image.png

3.列表循环(这个和vue差别有点大了,虽然用法大致相同)

image.png

它还可以修改别名(wx:for-item wx:for-index)

image.png

区分:如果是普通数组,wx:key写*this即可,也是item的意思;如果是数组对象,写对象里面的唯一标识即可(直接写)切记不要点语法{{item.id}}

image.png

4.事件绑定

根据不同组件它可以支持不同事件,可以查看文档

image.png

setdata(数据修改要在这里面才行)

image.png

data-xxx自定义传值(通过在标签中传递属性实现传递参数)+数组增删方法

image.png

这个略坑,不像vue那样传值的方式,需要注意。

随便试了几下,确实用起来和vue很像,但又是有区别的:

1.基本都是分离式页面,vue可以结构,逻辑,样式一起写;

2.需要很多的{{}},一开始好容易搞懵逼;

3.自定义传值和修改值一言难尽,不过还是让人耳目一新吧!