小程序入门

Posted on

前言

先介绍一下自己入门小程序的过程，暑假在家闲着没事，正好又赶上小程序正式发布不久，正处于热门时期，所以自己就本着闲着打游戏不如学习的想法，开始了自己的小程序之旅；

小程序的前景

随着人们对手机依赖程度的越来越高，手机的功能也越来越强大；人们生活中需要的APP也五花八门，越来越多。虽然大家的手机中下载好多APP，但是经常翻开的往往只是那么几个，小程序的开发准则是即用即来，无需下载，用完就走。该模式将使大众能更方便的使用APP相关功能。

学习小程序的好处

  • 可以多掌握一个新的技术栈
  • 熟悉加深对css样式的使用
  • 跟上潮流

小程序入门所需知识

html、
css、
js

小程序使用的语言为wxml（微信标记语言），wxss（微信样式表），但是这些和原来的html，css并没有太大区别；
wxml只是将html中的一些标签的名字进行了改变;
wxss和css几乎一模一样，就是通过各种选择器对wxml的样式进行设置

与css相比，wxss扩展的特性是：
  • 尺寸单位
  • 样式导入
尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx；
在iPhone6下，1px = 2rpx （建议使用该模拟器，换算更为简单）

样式导入

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

示例代码：

1
2
3
4
/** common.wxss **/
.small-p {
  padding:5px;
}
1
2
3
4
5
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}
小程序公用js提取到app.js中调用的实例

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var app=getApp();
Page({
  data: {
    page:"测试数据1"
  },
  /*调用公共方法test01*/
  test01:function(event){
    var that=this;
    app.test01(event,that);
  },
  /*调用公共方法test02*/
  test02: function () {
    app.test02();
  }
})

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
App({

  test01: function (event, that){
    that.data.page= "修改后的page数据";
    that.setData({
      page: that.data.page
    });
    console.log(event.currentTarget.dataset.id);
  },

  test02:function(){
    console.log("test2");
  }
})

个人建议

如果具有一定的前端开发经验，那么入门小程序可以说非常快。可以先照着官方文档用几个常用组件和API，熟悉一下小程序语法，就可以开始进行一些简单的开发；当遇到需要使用的东西，可以查阅官方文档进行学习。