微信小程序入门

2018-01-25 本文已影响0人 Arthur澪

初步认识

与前端开发比较类似，包含HTML、css、js相似的代码。但是，当然有不同之处。

原生项目结构

举例：一个最简单的示例项目，如下图：

QQ.png

项目里生成了不同类型的文件

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

》》以上4种文件的作用

.json文件

1、app.json
整个小程序的全局配置，包括所有页面路径、网络超时时间、底部 tab 等。如：

{
  "pages":[        //  描述当前小程序所有页面路径。
    "pages/index/index",
    "pages/logs/logs"
  ],
// 以上说明，项目定义了两个页面，分别位于 pages/index/index 和 pages/logs/logs 目录

  "window":{     //  所有页面的顶部背景颜色，文字颜色
    "backgroundTextStyle":"light", 
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

2、project.config.json
工具的一些个性化配置，在工具上做的任何配置都会写入到这个文件，包括编辑器的颜色、代码上传时自动压缩等一系列选项。

.WXML文件

类似 HTML 的角色，用来描述当前页面的结构。文件的内容如下：

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
</view>

有标签、属性等构成。但是也有与HTML不一样的地方。如：
1、标签名字，小程序的 WXML 用的标签是 view, button, text 等，包装好了组件的基本能力。此外还有地图、视频、音频等等组件。
2、多了一些用 wx: 开头的属性和{{ }} 表达式，目的是把渲染和逻辑分离— —不再让 JS 直接操控 DOM，JS只需管理状态即可，然后再通过一种'模板语法'来描述状态和界面结构的关系。通过{{}}这种语法，把一个变量绑定到界面上。如<text class="info">{{normalTitle}}</text>

.WXSS文件

具有 CSS 大部分的特性，并有一些扩充和修改。

新的尺寸单位 rpx
提供了全局的样式和局部样式。如app.wxss 作为全局样式，会作用于小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

.js文件

和用户做交互，处理用户的操作：响应用户的点击、获取用户的位置等。
如：点击 button 按钮，把界面上 msg 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

在 js 文件里声明 clickMe 方法来响应点击操作：

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

此外，还可以在 js 中调用小程序丰富的 API，可以方便调起微信提供的，如获取用户信息、本地存储、微信支付等功能。https://mp.weixin.qq.com/debug/wxadoc/dev/api/

PS：多数 API 的回调都是异步，需要处理好代码逻辑

小程序项目启动

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行：

App({
  onLaunch: function () {        // 小程序启动之后 触发
  }
})

整个小程序只有一个 App 实例，是全部页面共享的

小程序的页面

一个页面包含上述的4种文件。客户端先根据.json 配置生成一个界面，接着装载WXML 结构、WXSS 样式，最后装载 .js文件。

/* Page 是一个页面构造器，这个构造器就生成了一个页面
Page({
  data: {    // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {       // 页面渲染后 执行

  }
})