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

  因为微信小程序比较简单,直接开撸就行,千万别瞄准。

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

  功能介绍

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

写个微信小程序项目练练手

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

  也许你可以学到的东西

  1)css的优先级 代码见: /pages/air_quality/result.wxss

  2)页面跳转,数据的传递 /pages/air_quality/air_quality.js ../result.js common/utils.js

  3)网络请求 /pages/air_quality/air_quality.js

  4)样式统一 程序的配置 参考 app.wxss app.json

  5)modal显示和隐藏 /pages/air_quality/air_quality.wxml ../air_quality.js

  6)状态机 事件绑定等等

  css优先级

  微信样式文件,其实就是css样式做了个加减法,就变成了wxss文件。

  其中增加了一个单位 rpx(responsive pixel): 可以根据屏幕宽度进行自适应。不是绝对像素,类似Android中的dp单位。参考官方文档

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

  原则一: 继承不如指定

  原则二: #id > .class > 标签选择符

  原则三:越具体越强大

  原则四:标签#id >#id ; 标签.class > .class

  CSS优先?#24230;?#37325;计算法

  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

  然后,将这四个数?#22336;直?#32047;加,就得到每个CSS定义的优先级的值,

  然后从左?#25509;?#36880;位比较大小,数字大的CSS样式的优先级就高。

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

XML/HTML代码
  1. <View class="page">  
  2.     <view class="container" style="align-items: center">  
  3.          <!--...-->  
  4.         <view class="text_area">  
  5.         <text >  
  6.             查询城市: {{city}}  
  7.         </text>  
  8.            <!--...-->  
  9.         </view>  
  10.     </view>  
  11. </View>  

  其中class="page"中的page定义样?#25509;?

CSS代码
  1. .page {    
  2.     ...    
  3.     font-size: 32rpx;    
  4. }

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

CSS代码
  1. text {    
  2.     font-size: 34rpx;     
  3. }

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

  页面的跳转

  再小的程序,一个界面也不太够用,跳转界面还是必须的。

  微信提供了navigator组件,当用户按下?#31859;?#20214;时跳转,这属于静态跳转,类似网页中的a标签;

  也可以在触发某些事件时,通过导航Api 跳转界面,这种做法比较灵活。

JavaScript代码
  1. //跳转地址可以写相对路径,绝对路径一定要以/ 开头 这样写pages/air_quality/result是错误的  
  2. wx.navigateTo( {    
  3.       url:util.createURL( "./result", res.data.retData),  
  4. });  

  路径后面可以通过? 拼装要传递的数据, 类似网络中get请求拼装url一样。

  上面createURL就是我写的一个工具方法 ,在项目的common/utils.js文件?#23567;?/p>

JavaScript代码
  1. /*链接和参数*/  
  2. function createURL( url, obj ) {  
  3.   let props = "";  
  4.   let resultURL="";    
  5.   for(let p in obj){    
  6.     if(obj[p])  
  7.     props+= "&"+p + "=" + obj[p];    
  8.   }  
  9.   resultURL=url+"?"+props.substr(1);  
  10.   console.log(resultURL);  
  11.   return resultURL;    
  12. }  
  13.   
  14. module.exports = {  
  15.   createURL: createURL  
  16. }  

  网络请求

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

  下面是我的代码:

JavaScript代码
  1. //联网  
  2. wx.request( {  
  3.   //url  
  4.   url: Constant.AIR_QUALITY_URL,  
  5.   header: {  
  6.     "Content-Type""application/json",  
  7.     "apikey": Constant.API_KEY  
  8.   },  
  9.   data: {  
  10.     "city"this.data.inputValue  
  11.   },  
  12.   //res = {data: '开发者服务器返回的内容'}  
  13.   success: function( res ) {  
  14.     console.log( res.data );  
  15.     if( res.data.errNum === 0 ) { //成功  
  16.     //跳转地址可以写相对路径,绝对路径一定要以/ 开头 这样写pages/air_quality/result是错误的  
  17.       wx.navigateTo( {    
  18.         url:util.createURL( "./result", res.data.retData),  
  19.       });  
  20.     }else{  
  21.       that.setData( { //这个位置应该用page的引用调用  
  22.         modalHidden: false,  
  23.         modalErrorText:res.data.retMsg  
  24.       });  
  25.     }  
  26.   
  27.   },  
  28.   //失败,弹出modal  
  29.   fail: function() {  
  30.     //console.log(this); //这时候的this不是Page了  
  31.     that.setData( { //这个位置应该用page的引用调用  
  32.       modalHidden: false,  
  33.        modalErrorText:"请求失败,请检测网络"  
  34.     })  
  35.   },  
  36.   //无论成功与失败,loading都取消  
  37.   complete: function() {  
  38.     that.setData( {  
  39.       loading: false  
  40.     })  
  41.   }  
  42. });  

  页面统一样式

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

  ?#27599;?#30340;程序不一定好用,但是好用的程序一定?#27599;礎?#21738;怕是个充气的,你也肯定选?#27599;?#30340;那个。

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

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

CSS代码
  1. /**app.wxss**/  
  2. page {  
  3.   background-color#fbf9fe;   
  4.   height: 100%;  
  5. }  
  6. /**容器 flex-direction: column 表示元素垂直排列*/  
  7. .container {  
  8.   min-height: 100%;  
  9.   display: flex;  
  10.   flex-direction: column;  
  11.   justify-content: space-between;  
  12.   padding: 200rpx 0rpx;  
  13. }   
  14.   
  15.  /**page 用于页面根标签 overflow超出范围的裁剪**/  
  16. .page {  
  17.     min-height: 100%;  
  18.     flex: 1;  
  19.     background-color#FBF9FE;  
  20.     font-size: 32rpx;  
  21.     font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;  
  22.     overflowhidden;  
  23. }  
  24.  /**页面中的input的组件**/  
  25. .page input{  
  26.     padding: 20rpx 30rpx;  
  27.     background-color#fff;  
  28. }  
  29.   
  30. /**段落*/  
  31. .section{  
  32.     margin-bottom: 80rpx;  
  33. }  
  34. /**段落标题*/  
  35. .section__title{  
  36.     margin-bottom: 16rpx;  
  37.     padding-left: 30rpx;  
  38.     padding-right: 30rpx;  
  39. }  
  40.   
  41. /**button范围*/  
  42. .btn-area{  
  43.     padding: 0 30rpx;  
  44. }  
  45. /**button*/  
  46. .btn-area button{  
  47.     margin-top: 20rpx;  
  48.     margin-bottom: 20rpx;  
  49. }  

  状态机

  微信框架刷新界面的方式类似React Native的状态机。

  微信每个页面都可以设置data数据。如我的项目中的:

JavaScript代码
  1. Page( {  
  2.   data: {  //状态机数据  
  3.     inputValue: ""//输入的内容  
  4.     loading: false//加载状态  
  5.     disabled: true//按钮是否可用  
  6.     modalHidden: true//modal弹出状态  
  7.     modalErrorText:"请求失败,请检测网络"//modal弹出提示文字  
  8.   },  
  9.   ....  
  10. }  

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

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

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

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

  最后吐槽

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

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

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

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

写个微信小程序项目练练手

转自CSDN于连林520wcf的专栏

除非特别注明,鸡啄米文章均为原创
转载请标明本文地址:http://www.xosuay.tw/software/641.html
2016年10月10日
作者:鸡啄米 分类:软件开发 浏览: 评论:0