微信小程序开发总结
小程序开发
浏览:1210 次

前言
最近,ITA的一个项目碰巧使用了微信小程序,所以我们来总结一下小程序的用法。本文仅适用于初次接触微信小程序的人,不适用于使用过微信小app的人。
微信小程序于一年多前的2017年1月19日凌晨上线,因此在线教程数不胜数。在知乎上,一位受访者回答得非常详细。你可以阅读更多,
开发工具
微信小程序基础知识
前端项目结构
传统网页的结构是HTML+CSS+JS,微信小程序是WXML+WXSS+JS
WXML(WeiXin Markup Language)是由框架设计的一组标记语言,可以与之结合以构建页面结构。
WXSS(WeiXin Style Sheets)是一组用于描述WXML组件样式的样式语言。
小程序的项目结构
WXML语言
1.支持数据绑定
2.列表渲染可用,wx:用于

3.条件渲染可用,wx:if、wx:elif、wx:else
4.您可以使用模板并使用<;/模板>定义代码片段,然后在不同的地方调用它
5.可以在标签bindtap中绑定事件
wxs软件
微信小程序的新单元rpx(响应像素)
Rpx实际上将屏幕宽度分成750份。每个副本的像素大小随屏幕而变化。例如,如果iPhone 6的屏幕宽度为375px,则1px=2rpx。iPhone 5的屏幕宽度为320px,因此1px=2.34rpx。
rpx屏幕像素对比图
这是一篇非常详细的文章,
使用@import将wxss导入wxcss文件。例如,以下是导入公共项的示例。wxss到app.wxss
/**app。wxs软件**/
@导入“common.wxss”;
.中间{
填充:15px;

}
总结
你踩过的坑:使用视图滚动时,不能使水平滚动条无效。这是因为你需要添加自己的风格,而不仅仅是使用官方组件,
添加溢出:隐藏在滚动视图标签中;空白:nowrap
滚动视图中的视图标记需要添加display:inline块
滚动视图>

经常浏览的页面: