小程序开发（无敌新人版(๑•̀ㅂ•́)و✧）

简介

     小程序开发是什么呢？（其实我也不知道不知道 ）

噗。· u ·，正经，正经。让我们从小程序所处的地位聊起，小程序到底是什么吧(๑•̀ㅂ•́)و✧。小程序是移动应用中的一种，它是由wxml，wxss，js核心，框架组件及API组成的。

PS：而移动应用又包括了大家所熟悉的：wap站点（html，js，css，zepto等各种框架），混合移动应用（html，js，css，ionic，cordova等），原生移动应用（Android&ios原生语言）。而这些移动应用的后台开发都是java，php，nodejs及数据库语言SQL等。

目录结构

    一个完整的小程序项目的目录结构如下：

 

 

    在小程序的目录中，app.json的 tabBer是一个比较特殊又重要的组件。tabBer是导航栏样式设置

效果如下：

组件

 

WXSS解析（样式控制）

     wxss与前端三大件（HTML，CSS，JavaScript）中的CSS具有相同作用的脚本编辑语言。单独的wxss是起不了什么大风大浪的，他唯有和wxml，js在一起才能发挥作用，为非作歹。

    wxss与css相比较的话，多出了一下两种新特性：

• 尺寸单位
• 样式导入

    尺寸单位：小程序自己定义的一个像素单位rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

样式导入：使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

[plain] view plain copy

1. /** common.wxss **/  
2. .small-p {  
3.   padding:8px;  
4. }  

[plain] view plain copy

1. /** app.wxss **/  
2. @import "common.wxss";  
3. .middle-p {  
4.   padding:16px;  
5. }  

WXML解析

    wxml与前端三大件（HTML，CSS，JavaScript）中的HTML具有相同作用的脚本编辑语言。单独的wxml是起不了什么大风大浪的，他唯有和wxss，js在一起才能发挥作用，为非作歹。（这句话好像在哪里见过。。。_(:з」∠)_） 

下面应用小程序的官方文档作解释： 

    WXML(WeiXin Markup Language)是框架设计的一套标签语言，结合基础事件、事件系统，可以构建出页面的结构。和 HTML 非常相似，有标签、属性等等构成。但是也有很多不一样的地方，我们来一一阐述一下：

1. 标签名字有点不一样往往写 HTML 的时候，经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。换个思路，既然大家都需要这些组件，为什么我们不能把这些常用的组件包装起来，大大提高我们的开发效率。从上边的例子可以看到，小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力

2. 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式在网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，JS 会记录一些状态到 JS 变量里边，同时通过 DOM API 操控 DOM 的属性或者行为，进而引起界面一些变化。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM 的开发模式(例如 React, Vue)，提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。小程序的框架也是用到了这个思路，如果你需要把一个 Hello World 的字符串显示在界面上。WXML 是这么写 :

   <text></text>
   

   JS 只需要管理状态即可:

   this.setData({ msg: "Hello World" })
   

   通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

API（访问设备，网络，与微信通讯）

   关于API，，，，，emmmm，我们再来看一次官方文档吧(๑•̀ㅂ•́)و✧

为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用。

要获取用户的地理位置时，只需要：

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    var latitude = res.latitude // 经度
    var longitude = res.longitude // 纬度
  }
})

调用微信扫一扫能力，只需要：

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

需要注意的是：多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题。

最后

    小程序的构造和组成就介绍完啦，下次我们再来细说小程序的点点滴滴吧ヾ(◍°∇°◍)ﾉﾞ