初探微信小程序

正文

啰里八嗦

昨天上班第一天，没错，是第一天。公司今年放假很足，撒泼的我无（tian）忧（bu）无（zhi）虑（chi）的度过了漫长的十一天，上班了发现自己得了 节后综合症 ，这病严重吗？嗯，估计得有个礼拜才能痊愈。

所以，放假休闲的程序猿一定要感到深深的罪恶感，为了啥？为了不生病，为了啥？

没出正月，都在年里，给大家拜个晚年，祝大家晚年幸福。

扯了会，接下来咱们开始正文，说点有用的。

概念

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。

可以理解成一套嵌套在微信里面的app，和原生app不同的是不需要下载，属于小而轻的应用。

开发前的准备

1、 注册账号 2、 下载开发者工具 , 下载 1.02.1801081 这个版本的，最新版的有bug，编译的时候调试器 Wxml 窗口会出现空的 page 标签，里面没有内容。编辑器内复制也会偶尔失效。

3、注册好后登录下 微信公众平台 ，在设置里找到开发设置，把appID保存下来，一会开发的时候需要用到

快速开始

1、此时，工具有了，ID有了，接下来开始我们的撸码之旅。打开开发者工具，扫码登录后选择小程序项目，点击右下角的加号，创建新项目，选择项目目录，填写appID，项目名称，写好后点击确定。

2、确定以后，默认打开后，发现给我们创建了一些代码，代码一会我们再讲。

页面是空白的，打开调试器后发现页面有报错，如下

点击右上角的详情，修改下配置，把调试基础库改成1.9.1，然后把 不校验安全域名、web-view 域名、TLS 版本以及 HTTPS 证书 勾选上，不然我们的请求就必须得是 https 的了

3、此时控制台没有报错了，页面展示如下，点击按钮，我们可以看到微信授权，点击允许，我们的头像和昵称就显示在页面上了

项目结构

我们主要看 app.js 、 app.json 、 app.wxss 三个文件和 pages 文件夹里面的 wxml

1、 app.js 做为小程序的入口，里面有个App实例，每个小程序只会有一个App实例，小程序启动以后触发onLaunch函数执行，获取用户信息

2、 app.json 是小程序的所有全局配置， pages 字段放置所有页面的路径， window 字段定义所有页面的顶部背景颜色，文字颜色 详细配置请 戳这里👇

3、 app.wxss 文件就是页面公用的样式，仅支持部分css选择器

4、 wxml 就是我们的HTML文件，常用标签为 view 、 text 等，没有所谓的 div 、 span 、 p 一类的标签了，我们习惯称它们为组件

设计理念

小程序内部可以理解成一个mvvm的框架，分为逻辑层和视图层，逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

// pages/test/index.js
Page({
  data:{  // 页面的初始数据
      text: 'hello world'
  },
  onLoad(){
    console.log('hello')
  },
  change(){
    this

请到「今天看啥」查看全文