• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

一个微信小程序项目

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

学会一项开发技能最快的步骤就是:准备,开火,瞄准。最慢的就是:准备,瞄准,瞄准,瞄准......

因为微信小程序比较简单,直接开撸就行,千万别瞄准。
于是乎,趁着今天上午空气质量不错,撸了一个小程序,放在了男性交友网站上了,我添加了很全的注释,大家赏个star。

地址:https://github.com/yll2wcf/wechat-weapp-lifeTools


功能介绍

功能比较简单,调用了百度ApiStore的接口即时查询空气质量。


我计划多加一些功能,争取把微信小程序提供的功能全用一遍。

也许你可以学到的东西

  1. css的优先级  

  2. 页面跳转,数据的传递

  3. 网络请求

  4. 样式统一 程序的配置

  5. modal显示和隐藏

  6. 状态机 事件绑定等等

css优先级

微信样式文件,其实就是css样式做了个加减法,就变成了wxss文件。
其中增加了一个单位 rpx(responsive pixel): 可以根据屏幕宽度进行自适应。不是绝对像素,类似Android中的dp单位。参考
官方文档

除去上面的,剩下的wxss和css大部分还是一样的,包括样式选择的优先级。

原则一: 继承不如指定
原则二: #id > .class > 标签选择符
原则三:越具体越强大
原则四:标签#id >#id ; 标签.class > .class

CSS优先级权重计算法

CSS优先级包含四个级别(标签内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数!

根据这四个级别出现的次数计算得到CSS的优先级。

CSS优先级的计算规则如下:

  • 元素标签中定义的样式(Style属性),加1,0,0,0

  • 每个ID选择符(如 #id),加0,1,0,0

  • 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0

  • 每个元素选择符(如p)或伪元素选择符(如 :firstchild)等,加0,0,0,1
    然后,将这四个数字分别累加,就得到每个CSS定义的优先级的值,
    然后从左到右逐位比较大小,数字大的CSS样式的优先级就高。

啰嗦了这么多,不如直接看例子,项目中result.wxml文件中布局:


其中class="page"中的page定义样式有:


Text标签也指定了font-size样式


当前位置 class page中指定了font-size,Text也指定了font-size。标签虽然优先级不如class高, 但是原则一:继承不如指定,所以34rpx生效。

页面的跳转

再小的程序,一个界面也不太够用,跳转界面还是必须的。
微信提供了
navigator组件,当用户按下该组件时跳转,这属于静态跳转,类似网页中的a标签;
也可以在触发某些事件时,通过导航Api 跳转界面,这种做法比较灵活。


路径后面可以通过? 拼装要传递的数据, 类似网络中get请求拼装url一样。
上面createURL就是我写的一个工具方法 ,在项目的
common/utils.js文件中。


网络请求

具体写法可以参考官方文档

下面是我的代码:



页面统一样式

微信小程序的api不是很多,比较容易上手, 但是写出来一个好的程序还是需要仔细研究的,建议大家看一下微信提供的设计文档

好看的程序不一定好用,但是好用的程序一定好看。哪怕是个充气的,你也肯定选好看的那个。

为了每个界面样式统一,大家可以把相关样式抽取到app.wxss文件中,这个文件的样式其它所以界面都可以直接使用。

下面是项目里的app.wxss,因为涉及的页面较少,用到的样式不多,目前就下面几个:


状态机

微信框架刷新界面的方式类似React Native的状态机。
微信每个页面都可以设置data数据。如我的项目中的:


data里的数据一般用来控制界面的变化。

data里的数据不要随便乱写, 只设置和界面相关的。因为里面的数据一旦发生变化就会刷新界面,无关的数据只会加重渲染的压力。

data里面的数据,可以在wxml文件中通过 {{js数据}}格式绑定。

最后强调, 只能使用setData函数改变状态机变量

最后吐槽

世界上只有两种程序,一种是天天挨骂的,另一种是没人用的。

微信小程序的开发环境非常难用,简直在侮辱开发环境这个词。连个自动闭合标签都没有,好多提示都没有(没提示谁会写代码啊),用中文输入法就会发现好多问题,想写中文注释需要时刻保持shift键切换,千万别忘了。

如果不想用它,也没问题, 用webStorm也可以写, 但是目前调试还是在微信开发环境中好用点。

webStorm需要配置 *.wxss和 *.wxml 的文件类型。 wxss对应css , wxml对应xml或者html



由于微信公众号推送的内容,不允许有小程序文档的链接,大家可以看原文链接


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
兼容谷歌验证器,开源的动态验证码小程序了解一下发布时间:2022-07-18
下一篇:
小程序初入门发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap