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

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

　　地址：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优先级权重计算法

　　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文件中布局:

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定义样式有:

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组件，当用户按下该组件时跳转，这属于静态跳转，类似网页中的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文件中。

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不是很多，比较容易上手， 但是写出来一个好的程序还是需要仔细研究的，建议大家看一下微信提供的设计文档

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

　　为了每个界面样式统一，大家可以把相关样式抽取到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.     overflow: hidden;  
  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函数改变状态机变量

　　最后吐槽

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

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

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

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

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

转自CSDN于连林520wcf的专栏

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