开发了一个微信小程序项目
学会一项开发技能最快的步骤就是:准备,开火,瞄准。最慢的就是:准备,瞄准,瞄准,瞄准……
因为微信小程序比较简单,直接开撸就行,千万别瞄准。
于是乎,趁着今天上午空气质量不错,撸了一个小程序,放在了男性交友网站上了, 我添加了很全的注释,大家赏个star。
地址:https://github.com/yll2wcf/wechat-weapp-lifeTools
功能介绍
功能比较简单,调用了百度ApiStore的接口即时查询空气质量。
我计划多加一些功能,争取把微信小程序提供的功能全用一遍。
也许你可以学到的东西
- css的优先级 代码见: /pages/air_quality/result.wxss
- 页面跳转,数据的传递 /pages/air_quality/air_quality.js ../result.js common/utils.js
- 网络请求 /pages/air_quality/air_quality.js
- 样式统一 程序的配置 参考 app.wxss app.json
- modal显示和隐藏 /pages/air_quality/air_quality.wxml ../air_quality.js
- 状态机 事件绑定等等
css优先级
微信样式文件,其实就是css样式做了个加减法,就变成了wxss文件。
其中增加了一个单位 rpx(responsive pixel): 可以根据屏幕宽度进行自适应。不是绝对像素,类似Android中的dp单位。参考官方文档
除去上面的,剩下的wxss和css大部分还是一样的,包括样式选择的优先级。
原则一: 继承不如指定
原则二: #id > .class > 标签选择符
原则三:越具体越强大
原则四:标签#id >#id ; 标签.class > .classCSS优先级权重计算法
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文件中布局:
<View class="page"><view class="container" style="align-items: center"><!--...--><view class="text_area"><text >查询城市: {{city}}</text><!--...--></view></view>
</View>
其中class="page"
中的page定义样式有:
.page {...font-size: 32rpx;
}
Text标签也指定了font-size
样式
text {font-size: 34rpx;
}
当前位置由于 class page中指定了font-size,Text标签也制定了该属性, 虽然标签优先级不如class高, 但是原则一:继承不如指定,所以34rpx生效。
页面的跳转
再小的程序,一个界面也不太够用,跳转界面还是必须的。
微信提供了navigator组件,当用户按下该组件时跳转,这属于静态跳转,类似网页中的a标签;
也可以在触发某些事件时,通过导航Api 跳转界面,这种做法比较灵活。
//跳转地址可以写相对路径,绝对路径一定要以/ 开头 这样写pages/air_quality/result是错误的
wx.navigateTo( { url:util.createURL( "./result", res.data.retData),
});
路径后面可以通过? 拼装要传递的数据, 类似网络中get请求拼装url一样。
上面createURL就是我写的一个工具方法 ,在项目的common/utils.js
文件中。
/*链接和参数*/
function createURL( url, obj ) {let props = "";let resultURL=""; for(let p in obj){ if(obj[p])props+= "&"+p + "=" + obj[p]; }resultURL=url+"?"+props.substr(1);console.log(resultURL);return resultURL;
}module.exports = {createURL: createURL
}
网络请求
具体写法可以参考官方文档
下面是我的代码:
//联网wx.request( {//urlurl: Constant.AIR_QUALITY_URL,header: {"Content-Type": "application/json","apikey": Constant.API_KEY},data: {"city": this.data.inputValue},//res = {data: '开发者服务器返回的内容'}success: function( res ) {console.log( res.data );if( res.data.errNum === 0 ) { //成功//跳转地址可以写相对路径,绝对路径一定要以/ 开头 这样写pages/air_quality/result是错误的wx.navigateTo( { url:util.createURL( "./result", res.data.retData),});}else{that.setData( { //这个位置应该用page的引用调用modalHidden: false,modalErrorText:res.data.retMsg});}},//失败,弹出modalfail: function() {//console.log(this); //这时候的this不是Page了that.setData( { //这个位置应该用page的引用调用modalHidden: false,modalErrorText:"请求失败,请检测网络"})},//无论成功与失败,loading都取消complete: function() {that.setData( {loading: false})}});
页面统一样式
微信小程序的api不是很多,比较容易上手, 但是写出来一个好的程序还是需要仔细研究的,建议大家看一下微信提供的设计文档
好看的程序不一定好用,但是好用的程序一定好看。哪怕是个充气的,你也肯定选好看的那个。
为了每个界面样式统一,大家可以把相关样式抽取到app.wxss
文件中,这个文件的样式其它所以界面都可以直接使用。
下面是项目里的app.wxss
,因为涉及的页面较少,用到的样式不多,目前就下面几个:
/**app.wxss**/
page {background-color: #fbf9fe; height: 100%;
}
/**容器 flex-direction: column 表示元素垂直排列*/
.container {min-height: 100%;display: flex;flex-direction: column;justify-content: space-between;padding: 200rpx 0rpx;
} /**page 用于页面根标签 overflow超出范围的裁剪**/
.page {min-height: 100%;flex: 1;background-color: #FBF9FE;font-size: 32rpx;font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;overflow: hidden;
}/**页面中的input的组件**/
.page input{padding: 20rpx 30rpx;background-color: #fff;
}/**段落*/
.section{margin-bottom: 80rpx;
}
/**段落标题*/
.section__title{margin-bottom: 16rpx;padding-left: 30rpx;padding-right: 30rpx;
}/**button范围*/
.btn-area{padding: 0 30rpx;
}
/**button*/
.btn-area button{margin-top: 20rpx;margin-bottom: 20rpx;
}
状态机
微信框架刷新界面的方式类似React Native的状态机。之前写过一篇从零学React Native之02状态机
微信每个页面都可以设置data数据。如我的项目中的:
Page( {data: { //状态机数据inputValue: "", //输入的内容loading: false, //加载状态disabled: true, //按钮是否可用modalHidden: true, //modal弹出状态modalErrorText:"请求失败,请检测网络"//modal弹出提示文字},....
}
data里的数据一般用来控制界面的变化。
data里的数据不要随便乱写, 只设置和界面相关的。因为里面的数据一旦发生变化就会刷新界面,无关的数据只会加重渲染的压力。
data里面的数据,可以在wxml文件中通过 {{js数据}}
格式绑定。
最后强调, 只能使用setData函数改变状态机变量
最后吐槽
世界上只有两种程序,一种是天天挨骂的,另一种是没人用的。
微信小程序的开发环境非常难用,简直在侮辱开发环境这个词。连个自动闭合标签都没有,好多提示都没有(没提示谁会写代码啊),用中文输入法就会发现好的问题,想写中文注释需要时刻保持shift键切换,千万别忘了。
如果不想用它,也没问题, 用webStorm也可以写, 但是目前调试还是在微信开发环境中好用点。
webStorm需要配置 *.wxss和 *.wxml 的文件类型。 wxss对应css , wxml对应xml或者html
有兴趣学习微信小程序开发的可以关注简书专题 微信小程序开发
更多精彩请关注微信公众账号likeDev
开发了一个微信小程序项目相关推荐
- 2天3夜开发了一个微信小程序,用它挣了10.7万
大家好,我是对白. 粉丝一直说要推荐一个微信小程序的项目,找到下面这个希望大家白嫖快乐.本项目可用于二次开发接私活,前段时间有粉丝给我反馈他用这个项目改造3天挣了10多万. 项目介绍 youlai-m ...
- 零基础一天学会开发制作一个微信小程序【附源码】
时至如今,微信已然成为一个全民通用的工具,相应的微信小程序开发已经是一个热门的开发项目. 小程序的前端代码和web是极其相似的,wxml和html.wxss和css以及js,现在还经常将wxss读作c ...
- 开源了个人开发的一个微信小程序,提供共享场景服务,支持图片和小视频
初衷 个人开发这个小程序源自一个想法:小时候看葫芦娃,每个葫芦娃都有自己的本领,其中一个"千里眼"的本领可真大.参加工作后,可能有些怀旧,想看看大学学习的地方.住过的宿舍 或者曾经去过的小地方,但并不 ...
- 微信小程序常识——只需4个文件即可构成一个完整的微信小程序项目
[微信小程序最小系统]搭建操作步骤: 新建一个微信小程序项目,但是注意[在当前目录中创建quick start项目]前的单选框不打钩,如下图 新建如下图的四个文件 打开[app.js]文件,注册小程序 ...
- 【图片消消乐】单机游戏-微信小程序项目开发入门
这是一个微信小程序项目,是类似开心消消乐的休闲小游戏,老少皆宜,游戏互动里面的图片是用的任何图片素材,根据自己的需求更换图片即可.想要做游戏不知道怎么做,建议从这个小程序入手,花时间研究学习,很快就拥 ...
- 4、微信小程序-项目配置
文章目录 前言 一.公共样式 二.app全局配置 1.app.js 2.app.wxss 三.项目搭建目录 前言 我们在写一个微信小程序项目的时候,需要对项目进行一些基础配置,这些配置可以更加便捷地帮 ...
- 一个程序如何连接到外网_如何从头开始开发一个微信小程序
网上有很多的人在问:怎么开发一个微信小程序?今天我来给大家详细讲讲如何申请开发并部署一个微信小程序,大家看完这篇文章后就能够自己运营一个属于自己的小程序了. 现在的小程序有百度小程序,头条小程序,支付 ...
- 一个微信小程序开发示例
一个微信小程序开发示例(豆瓣电影) 新版本(不包含工作流)请移步至:https://github.com/zce/weapp-douban 当前仓库会暂缓更新,主要留下来给大家答疑 需要基础教程的朋友 ...
- DAY10微信小程序项目开发技术总结
一.每日实习任务 1.网页基础知识(html,css,js) 今天老师为我们介绍讲解了网页基础知识(html,css,js).首先,我们安装了谷歌浏览器及sublime text.老师为我们介绍了ht ...
最新文章
- 为什么大公司一定要使用微服务?
- Cannot place PIO comp S on the proposed PIO site PB6C / F5 because the types of their IOLOGICs a...
- 实时数仓入门训练营:实时数仓助力互联网实时决策和精准营销
- 线程管理(九)使用本地线程变量
- Java的多态形式中,如何访问成员变量和调用成员方法
- Bootstrap FileInput(文件上传)中文API整理
- LeetCode 473. 火柴拼正方形(回溯)
- Spark集群完全分布式安装部署
- clickhouse 小结1
- html5站点是什么意思,html5是什么意思(html5是什么技术)
- Mac和iPhone之间如何设置通用剪贴板?
- ARM嵌入式系统的问题分析与总结
- wpa_supplicant 使用
- kubectl管理多个集群配置
- mysql支持的时区列表_5.1.14 MySQL服务器时区支持
- Again! There are tons of wrong answers!
- 【前端面试】Part 1:2020届初级前端校招笔试题及面经总结 —— 基础知识题
- CSS颜色属性、文本文字属性、属性继承
- XAML中的Style
- 太阳能手机充电器设计
热门文章
- Java之stream流去重,单字段,多字段都可
- C# EMGU 3.4.1学习笔记(三)综合示例:形态学滤波(腐蚀/膨胀、开运算/闭运算、顶帽运算/黑帽运算)
- lol提示游戏环境异常重启计算机,msoffice系统工具教程lol游戏环境异常请重启机器该怎么办...
- Rumor CodeForces - 893C(并查集基本操作:维护连通块最值)
- 两万字详解!InnoDB锁专题!
- 从甲方、合作伙伴和团队成员三个维度学习项目管理的思维方法
- One Switch一键隐藏Mac桌面图标,Mac必备功能开关
- 计算机二级Python真题(二)
- 年终心结,心绪的总结!
- 女生最爱说的33句双关语