神刀安全网

小程序学习笔记2-使用weui开发小程序


不会写样式,怎样开发小程序?

作为一个对CSS一知半解的iOS开发者,开发小程序时如何写样式成为一大难题。幸好微信提供了WeUI这个样式库,让开头没有那么难,先用WeUI实现部分样式,过程中自己再慢慢巩固学习CSS样式。毕竟要实现设计效果,CSS(wxss)是一定要会的。

关于weui

上一篇笔记小程序学习笔记1中用到的weui是从别的项目抠出来的,要正式开始用先下载一下官方的库和Demo。
GitHub地址

weui GitHub主页上有相关使用说明,这里就不再赘述,稍微搬过来一点儿,先大体了解一下~

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含buttoncelldialogprogresstoastarticleactionsheeticon等各式元素。

weui小程序Demo

小程序学习笔记2-使用weui开发小程序

小程序学习笔记2-使用weui开发小程序

weui 部分常用组件

各种样式的按钮:

小程序学习笔记2-使用weui开发小程序

button.png

常用表单输入:

小程序学习笔记2-使用weui开发小程序

input.png

各种列表样式:

小程序学习笔记2-使用weui开发小程序

List.png

最简单的开发方式-copy

打开下载的weui的Demo,找到自己需要的样式,将代码copy出来,粘贴到自己需要的地方就可以了~

小程序学习笔记2-使用weui开发小程序

抠代码.png

weui使用实战

  1. 确认开发需求,下图是一个简单的设置页面的UI。

    小程序学习笔记2-使用weui开发小程序

  2. 下一步就是要实现这个效果,先从weuiDemo中找到相应的效果。

    小程序学习笔记2-使用weui开发小程序

  3. copy对应的wxml代码

<view class="weui-cells weui-cells_after-title">             <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">                 <view class="weui-cell__bd">cell standard</view>                 <view class="weui-cell__ft weui-cell__ft_in-access"></view>             </navigator>             <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">                 <view class="weui-cell__bd">cell standard</view>                 <view class="weui-cell__ft weui-cell__ft_in-access"></view>             </navigator>         </view> 
  1. 将这段代码粘贴到自己的设置页面中,修改一下文字
  <view class="weui-cells weui-cells_after-title">     <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">         <view class="weui-cell__bd">问题反馈</view>         <view class="weui-cell__ft weui-cell__ft_in-access"></view>     </navigator>     <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">         <view class="weui-cell__bd">关于我们</view>         <view class="weui-cell__ft weui-cell__ft_in-access"></view>     </navigator>   </view> 
  1. 编译一下,就这么简单一句样式都没写,一个页面就写完了~

    小程序学习笔记2-使用weui开发小程序

  2. 与设计图还稍微有些不同,这就需要稍微修改一下CSS样式了。微信开发者工具提供了调试功能,对于新手来说,该样式比自己生写简单多了-_-

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 小程序学习笔记2-使用weui开发小程序

分享到:更多 ()

评论 抢沙发