微信小程序简易开发

  最近公司项目不是很赶, 所以平时还是有很多自由时间的, 刚好组长叫我做一个小程序的技术预研, 其实我以下所写的这些在微信官方文档上以及网上面都有详细说明的, 我这里只是做一个简化以及对我自己的学习小程序开发过程的一个记录。

开发准备

在开始小程序开发之前需要去官网注册一个appleID, 然后还需要下载小程序开发工具, 这些都比较简单, 这里就不累述了.

小程序注册链接: https://developers.weixin.qq.com/miniprogram/dev/

创建项目

官方的开发工具准备了一个QuickStart项目。在创建时，如果选择空文件夹，开发者工具会提示：是否需要创建一个QuickStart项目。选择是，开发者工具会自动帮助我们在开发目录里生成一个简单的项目。

项目结构

└─ Demo/ ······················· 项目所在目录
   ├─ pages/ ··························· 页面目录
   │  ├─ index/ ························  index页面
   │  │  ├─ index.js ···················   index页面逻辑
   │  │  ├─ index.wxml ·················   index页面结构
   │  │  └─ index.wxss ·················   index页面样式
   │  └─ logs/ ·························  logs页面
   │     ├─ logs.js ····················   logs页面逻辑
   │     ├─ logs.wxml ··················   logs页面结构
   │     └─ logs.wxss ··················   logs页面样式
   ├─ utils/ ···························  公共脚本目录
   │  └─ util.js ·······················   工具脚本
   ├─ app.js ··························· 应用程序逻辑
   ├─ app.json ························· 应用程序配置
   └─ app.wxss ························· 应用程序公共样式

页面结构

每个页面组件也分为四个文件组成:

• [page-name].js
  • 页面逻辑文件，用于创建页面对象，以及处理页面生命周期控制和数据处理
• [page-name].json :
  • 设置当前页面工作时的window的配置，此处会覆盖app.json中的window设置，也就是说只可以设置window中设置的属性
• [page-name].wxml :
  • wxml指的是Wei Xin Markup Language
  • 用于定义页面中元素结构的，语法遵循XML语法，注意是XML语法，不是HTML语法
• [page-name].wxss
  • wxml指的是Wei Xin Style Sheet
  • 用于定义页面样式的，语法遵循CSS语法，扩展了CSS基本用法和长度单位（主要就是rpx响应式像素）

项目配置

小程序的配置文件分为两种:

• 全局配置文件, 根目录下的 app.json
• 页面配置文件, 每个页面目录下的[page-name].json

app.json —> 项目配置声明文件 (指定项目的一些信息，比如导航栏样式颜色等等 )

{
  // 当前程序是由哪些页面组成的（第一项默认为初始页面）所有使用到的组件或页面都必须在此体现
  "pages": [ ... ],
  // 应用程序窗口设置
  "window": { ... },
  // 应用导航栏设置
  "tabBar": { ... },
  // 网络超时设置
  "networkTimeout": {},
  // 是否在控制台输出调试信息
  "debug": true
}

[page-name].json —> 用于指定特定页面工作时，window的设置：

{
  // 导航条背景色
  "navigationBarBackgroundColor": "#35495e",
  // 导航条前景色（只能是white/black）
  "navigationBarTextStyle": "white",
  // 导航条文本
  "navigationBarTitleText": "电影 « 豆瓣",
  // 窗口背景颜色
  "backgroundColor": "#fff",
  // 窗口前景色
  "backgroundTextStyle": "dark",
  // 是否开启下拉刷新
  "enablePullDownRefresh": true
}

逻辑层分析

应用程序逻辑 app.js

app.js作为项目主入口文件，用于创建应用程序对象

// App函数是一个全局函数，用于创建应用程序对象
App({
  // ========== 全局数据对象（可以整个应用程序共享） ==========
  globalData: { ... },

  // ========== 应用程序全局方法 ==========
  method1 (p1, p2) { ... },
  method2 (p1, p2) { ... },

  // ========== 生命周期方法 ==========
  // 应用程序启动时触发一次
  onLaunch () { ... },

  // 当应用程序进入前台显示状态时触发
  onShow () { ... },

  // 当应用程序进入后台状态时触发
  onHide () { ... }
})

也就是说，当应用程序启动时会自动执行项目目录下的app.js文件。

在app.js中通过调用全局App([option])方法创建一个应用程序实例。

其中通过参数指定的一些特定的方法，会在特定的执行时机去执行，也就是说通常所说的生命周期事件方法。

属性	类型	描述	触发时机
onLaunch	Function	生命周期函数–监听小程序初始化	当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow	Function	生命周期函数–监听小程序显示	当小程序启动，或从后台进入前台显示，会触发 onShow
onHide	Function	生命周期函数–监听小程序隐藏	当小程序从前台进入后台，会触发 onHide

也可以定义任意其他的对象成员（例如：方法和属性），这些成员可以在内部直接使用，或者外部通过获取app对象调用：

属性	类型	描述
其他	Any	开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问，一般用于存放业务逻辑配置，比如：API地址

app.js

App({
  data1: '123',
  data2: { message: 'hello world' },
  api: {
    list: 'https://github.com/zce/',
    detail: 'https://github.com/zce/',
  },
  foo () {
    return 'bar'
  }
})

other.js

// getApp 也是全局函数，可以在任意地方调用，用于获取全局应用程序实例对象
var app = getApp();
console.log(app.data1);
console.log(app.data2);
console.log(app.foo());

页面逻辑[page-name].js

[page-name].js是一个页面的重要组成部分，用于创建页面对象

// 获取全局应用程序对象
const app = getApp()

// Page也是一个全局函数，用来创建页面对象
Page({
  // ========== 页面数据对象（可以暴露到视图中，完成数据绑定） ==========
  data: { ... },

  // ========== 页面方法（可以用于抽象一些公共的行为，例如加载数据，也可以用于定义事件处理函数） ==========
  method1 (p1, p2) { ... },
  method2 (p1, p2) { ... },

  // ========== 生命周期方法 ==========
  // 页面加载触发
  onLoad () { ... }

  ...
})

在应用程序执行到当前页面时，会执行当前页面下对应的[page-name].js文件。 在[page-name].js中通过调用全局Page([option])方法创建一个页面实例。

Page([option])方法[option]参数说明

属性	类型	描述
data	Object	页面的初始数据
onLoad	Function	生命周期函数–监听页面加载
onReady	Function	生命周期函数–监听页面初次渲染完成
onShow	Function	生命周期函数–监听页面显示
onHide	Function	生命周期函数–监听页面隐藏
onUnload	Function	生命周期函数–监听页面卸载
onPullDownRefreash	Function	页面相关事件处理函数–监听用户下拉动作
其他	Any	开发者可以添加任意的函数或数据到 object 参数中，用 this 可以访问

视图层分析

[page-name].wxml页面结构

WXML（WeiXin Markup Language）是MINA框架设计的一套标签语言，基于XML。

结合一些基础组件、事件系统、模板数据绑定，可以构建出页面的结构。

简单来说：wxml ≈ xml + 事件系统 + 模板引擎

例如：

// js
Page({
  data: {
    todos: [
      { text: 'JavaScript', completed: false },
      { text: 'JavaScript+', completed: false },
      { text: 'JavaScript++', completed: false }
    ]
  },
  completed (e) { ... }
})

<!-- wxml -->
<view>
  <view wx:for="{{ todos }}">
    <block wx:if="{{ !item.completed }}">
      <text>{{ item.text }}</text>
      <button bindtap="completed" data-item-index="{{ index }}"> √ </button>
    </block>
  </view>
</view>

[page-name].wxss页面样式

WXSS（WeiXin Style Sheets）是MINA框架设计的一套标签语言，基于XML。

WXSS用来决定了在WXML中定义的组件应该怎么显示。

为了适应广大的前端开发者，我们的WXSS具有CSS大部分特性。 同时为了更适合开发微信小程序，我们对CSS进行了扩充以及修改。扩展的特性有:

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

rem（root em）: 规定屏幕宽度为20rem；1rem = (750/20)rpx 。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)	rem换算rpx (750/20)
iPhone5	1rpx = 0.42px	1px = 2.34rpx	1rem = 37.5rpx
iPhone6	1rpx = 0.5px	1px = 2rpx	1rem = 37.5rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx	1rem = 37.5rpx

• 建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
• 注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

样式导入

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

@import "common.wxss";
text {
  background-color: #ff0;
}

选择器

目前只支持如下选择器

选择器	样例	样例描述
.class	.intro	选择所有拥有 class=”intro” 的组件
#id	#firstname	选择拥有 id=”firstname” 的组件
element	view	选择所有 view 组件
element, element	view	checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容

全局样式与局部样式

定义在app.wxss中的样式为全局样式，作用于每一个页面。在[page-name].wxss文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.wxss中相同的选择器。