微信小程序入门到实战（一）

听海——sky

了解小程序

• 什么是小程序？
  

小程序其实就是一个工具，为人提供便捷服务的；随时可用，用完即走，减少桌面上面的app数量；

B2C（人与商品） 淘宝 JD
P2P（人与人）微信 QQ
C2P（人与服务）微信小程序 支付宝小程序

• 什么应用适合小程序？
  

对于一些性能要求不高，使用频度不高，业务逻辑简单的应用适合做成一个小程序的应用；比如购票，缴费，手机充值等

小程序的文件结构
一个小程序首先有四个应用入口文件：

- app.js：设置一些项目的全局变量
- app.json：每一个新页面都必须在这个地方注册，项目的导航栏和窗口界面设置有关的
- app.wxss：项目全局样式
- project.config.json：项目配置文件

一个页面主要是包含以下四个文件，这四个文件的名字应该都是一样的，最好以页面所在的文件夹名字为标准：

• xxx.wxml：页面的结构
• xxx.wxss：页面的样式
• xxx.json：页面的配置文件
• xxx.js：页面的脚本文件
  

页面可以嵌套页面，但是建议不要超过5个层级。


移动设备的分辨率与RPX

小程序推荐使用rpx为单位，这样就可以在任意屏幕下面实现自适应

小程序是移动端的开发，所以要注意像素的使用。

• pt：视觉单位（长度单位），与设备的屏幕物理尺寸有关系，也叫做逻辑分辨率（逻辑单位），与移动端的栅格渲染有关
• px：通常说的像素点，物理分辨率，随着屏幕的变化不会变化；一般设计师给的设计稿是以物理分辨率为单位的，也就是说，iPhone6下的分辨率是375，但是设计图却是750；因为rpx：px == 2：1，小程序的设计稿就要以iPhone6为参照。
• pt与px之间的关系：1个pt下面包含多个px；也就是说一个逻辑分辨率包含多个物理像素点。
• ppI(DPI)：计算的是屏幕显示1个逻辑分辨率包含多个物理像素点，值越大，显示的图像越细腻，清晰。计算的方法是：320*320+480*480的和开根号再处于屏幕尺寸最后乘以reader值。
• reader值：视网膜屏，表示一个逻辑像素点包含多个（reader值）物理像素点，一般reader值为2就达到了眼睛的所能观察到细腻的极限，再大几乎不怎么起作用，对于眼睛感觉到的色彩来说。
  

也就是说，当需要的元素大小适应屏幕尺寸，就选择rpx作为单位，否者使用px作为单位。


第一个小程序页面
新建一个项目，选择无AppID ，保存



新建一个页面



我们可以直接在项目的app.json中的pages属性下面按照此方式创建页面，保存，就可以在左边看到一个以welcom名字的文件夹，包含了页面所需要的四种文件，省略手动在app.js里面注册，并且里面都已经自动配置好了一些设置，防止出现下面的错误：



解决办法就是在相对应的页面js空文件中调用一下page({...})方法，相当于注册一下，注册的时候只需要写页面的名字，不需要区别是那种页面类型。所有该页面的方法都在page({...})方法里面执行

在app.json中pages这个属性里面的数组元素，谁出现在第一个位置，就是小程序的启动页面。
json类型的文件里面不能写注释，否者会报文件解析错误。

小程序里面使用view标签作为容器，分割文档的作用，类似于在html中使用的div。

text标签是一个文本标签，只有当文字被这个标签包裹起来的时候，才能在手机上面长按选中，这个标签支持转义字符的解析。

编写wxml代码

1. <view class='container'>
   
2.   <image class='user-avatar' src='/images/1.png'></image>
   
3.   <text class='user-name'>icessun</text>
   
4.   <view class='moto-container' bindtap='tapName'>
   
5.     <text class='moto'>开启小程序大门</text>
   
6.   </view>
   
7. </view>

复制代码

其实在wxml中编写页面骨架的时候，注意小程序默认在我们编写的骨架外面包裹了一个page标签，可以通过这个标签来设置整屏的颜色。



在小程序里面呢，一般都使用flex布局，弹性盒子模型

1. display: flex;
   
2.   flex-direction: column;
   
3.   align-items: center;

复制代码

这样第一个小程序页面我们就编写好了，保存运行一下，就可以看到效果，前提是把这个页面设置为启动页，因为我们还没有写页面跳转。




页面周期函数

在上面新建页面的时候，我们发现在js文件里面会自动在page()方法中生成一些方法，如下：

一般页面启动，会首先调用这三个函数：onLoad(页面加载，一个页面只会调用一次)----->onShow(页面显示，页面每次打开都会调用)----->onReady(页面完成初次渲染)

page()函数中的data:{ }属性，通常是保存页面需要绑定的数据，一般在里面设置一个变量，用来接收从服务器加载来的JSON数据，然后在通过数据绑定的方式绑定到页面上面。

app.js的生命周期

app.js是关于整个小程序项目的方法和属性，类似页面Page({...})函数，也需要一个外层函数包裹App({ ...})

1. App({
   
2.   //当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   
3.   onLaunch: function () {
   
4. 
   
5.   },
   
6.   // 当小程序启动，或从后台进入前台显示，会触发 onShow
   
7.   onShow: function (options) {
   
8. 
   
9.   },
   
10.   //当小程序从前台进入后台，会触发 onHide
    
11.   onHide: function () {
    
12. 
    
13.   },
    
14.   // 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
    
15.   onError: function (msg) {
    
16. 
    
17.   }
    
18. })
    
19. // 应用程序的全局变量
    
20.   globalData: {
    
21.     g_isPlaying: false,
    
22.     //  记录当前页面是否播放
    
23.     g_currentMusicPost: null,
    
24.     //  电影api地址
    
25.     doubanBase: 'https://api.douban.com'
    
26.   }

复制代码

当然也可以在里面设置一些全局的变量，然后在其他页面对应的js文件中通过下面的方式来获取到里面定义的全局变量。

1. var app = getApp();  
   
2. var globalData = app.globalData

复制代码