微信小程序demo解读(一)

  小程序依旧没有火起来,但是公司的直播平台准备做在微信端,用小程序作为舞台,说不定某天火起来就可以带起流量了。

  废话不多说,开始一点一点琢磨小程序。

  首先是开发工具。官方首推微信开发者平台。这东西容貌还可以,就是功能比较简单,而且调试时要切换窗口,而且不能同时开启多个。算了,还是用我心爱的webstorm进行开发,用开发者平台进行调试吧。

  

  首先从样式文件开始。小程序有其特殊的样式格式为wxss,但是在webstorm上不能识别,并不能为其添加颜色,或者进行typo识别。

  

  我们需要设置webstorm可以用css文件的解析规则对其进行解析。打开file-settings-File types可以进行设置。找到Cascading Style Sheet项,点击加号在下面添加*.wxss,保存,webstorm就可以用css规则解析此类文件了。wxml文件同理,需要用html规则解析。

      

  可以看到wxss文件上,padding属性值的单位rpx出现typo报错。这个是小程序特有的计量单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0。简单说就是所有手机屏幕都是750rpx宽,布局时请按百分比从750里面取。

时间: 2024-10-01 12:48:26

微信小程序demo解读(一)的相关文章

微信小程序demo解读(二)

小程序最外层有三个文件,上次我们介绍了全局样式app.wxss,接着我们来说另外两个文件. 我们来看看脚本文件App.js.为了方便解读我已经加上了注释. //app.js App({ /*启动函数 * */ onLaunch: function () { var logs = wx.getStorageSync('logs') || []; //调用API从本地缓存中获取数据 logs.unshift(Date.now()); wx.setStorageSync('logs', logs);

菠菜源码搭建与微信小程序Demo

demo 的界面设计以及交互设计 工具 菠菜源码搭建QQ:2152876294 网址diguaym.com已经全面对非邀请内测用户开放, 且在持续更新(我码代码的过程中就更新了两版, 所以开发时 IDE 版本不唯一) 不过其实忍受了半个小时微信的开发者工具之后, 我就改在 webstorm 中编辑了, 微信工具成了运行预览的工具, 不过听说IDE 中预览的效果, 也不能保证与真机一样哦~ 设计和功能: 知乎安卓版本 非常之简易版数据: 毕竟是知乎, 为了防止版权问题, fake 的数据使用的是我

微信小程序DEMO初体验

小程序虽然被炒的很热,但是绝大部分人却从未亲自体验过,在2017年的上班第一天,献上一个小程序DEMO,您可以体验! 注意:由于微信限制,只能使用扫一扫来体验下方小程序DEMO. DEMO首页截图如下: 本文转至:http://www.hotlist.com.cn/archives/109.html

微信小程序组件解读和分析:五、text文本

text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <view > <text>我是文本组件</text> </view> <text>{{text}}</text> 下面是JS代码: [JavaScript] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 1

微信小程序组件解读和分析:六、progress进度条

progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. progress进度条组件示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <!--index.wxml--> <view class="content">     <text class="con-t

微信小程序组件解读和分析:四、icon图标

icon图标组件说明: icon是一种图标格式,用于系统图标.软件图标等,这种图标扩展名为.icon..ico.常见的软件或windows桌面上的那些图标一般都是ICON格式的.在应用上面很多地方用到了icon图标,这样方便程序表述程序返回的操作状态,用户一眼就能看出应用返回的意思,提高用户体验,在小程序的组件提供了常用的icon图标,详细使用看下面介绍! icon图标组件用法说明: 在使用的icon的时候,使用icon标签,然后有type属性和size属性, 具体的属性看最后的属性总结,标签的

微信小程序组件解读和分析:十、input输入框

input输入框组件说明: 本文介绍input 输入框的各种参数及特性. input输入框示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 <view class="content"> type:有效值:text 感觉没什么区别 <input  placeholder="type=text" type=

微信小程序组件解读和分析:十一、label标签

label标签组件说明: label标签,与html的label标签基本一样.label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本,就会触发此控件.就是说,当用户选择该标签时,就会自动将焦点转到和标签绑定的表单控件上,主要用来改进表单组件的可用性.使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件.for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件.目前可以绑定的控件有:<button/>

微信小程序组件解读和分析:十二、picker滚动选择器

picker滚动选择器组件说明: picker: 滚动选择器,现支持三种选择器,通过mode属性来区分, 分别是普通选择器(mode = selector),时间选择器(mode = time),日期选择器(mode = date), 默认是普通选择器. picker滚动选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23