uniapp制作海报-新手怎么用uniapp制作图中小程序的样式？

uniapp分享弹窗，生成海报并支持保存,目前仅支持微信小程序

地址为:

新手怎么用uniapp制作图中小程序的样式？

很多新手在开始制作小程序的时候都想快速做一个功能看起来不错的小程序,那么怎么做呢?下面小编给大家分享一下。

方法/步骤

首先大家要下载按照Hbuilder软件,点击新建下面的项目

接着项目类型里面选择uni-app,然后选择一个模板,如下图所示

然后就创建好了项目的目录,如下图所示

接着打开Hbuilder的设置界面,配置小程序开发工具的路径,如下图所示

然后打开小程序开发工具,选择安全设置

接着开启服务端口,如下图所示

接下来我们点击Hbuilder的运行菜单,选择运行到小程序模拟器的微信开发者工具上,如下图所示

最后就可以看到一个小程序就快速制作完成了,如下图所示

二、uni-app模板块常用写法以及注意事项

v-for指令需要使用iteminitems形式的特殊语法,其中items是源数据数组,而item则是被迭代的数组元素的别名。

第一个参数item则是被迭代的数组元素的别名。

第二个参数,即当前项的索引index,是可选的。

结果

当Vue正在更新使用v-for渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue将不会移动DOM元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。

显示效果

此时把Y的switch进行打开,显示效果

随后更改数据源为datList2,显示效果为

此时发现本来是Y打开,顶部新增一个元素后变成是X打开,这就是所谓的就地更新每个元素,每个索引位置进行正确渲染,而switch是没有被重新渲染的(因为数据源没有控制switch开关状态的保存),所以显示的位置就不对了。

如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如input中的输入内容,switch的选中状态),需要使用:key来指定列表中项目的唯一的标识符。

重复如上操作,显示为正确

如不提供:key,会报一个warning,如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。

#注意#当同一个页面同时存在两个或两个以上的v-for遍历的时候,key值不能重复否则H5报错

热门标签