微信小程序开发思路

小程序还没有完全开放,不能真实体验,但通过文档和开发工具,可以了解到他的开发思路

下面就介绍下小程序的开发方式,希望能帮助有兴趣的朋友对整体思路有个快速了解

整体结构

默认示例项目的目录结构

从后缀名上可以看到,一共有4种类型:

  1. js 逻辑代码
  2. wxml 视图文件
  3. wxss 样式文件
  4. json 配置信息

/app.js 中可以定义小程序在启动时做哪些业务逻辑、全局函数、全局数据……

App({
  onLaunch: function () {
    ...    
  },
  getUserInfo:function(cb){
    ...
  },
  globalData:{
    userInfo:null
  }
})

/app.json 中进行小程序全局性的配置,例如 底部导航有哪些标签、共有哪些页面、头部title、背景色……

{
  "pages":[
    "pages/index/index", ...

  ],
  "window":{
    "navigationBarTitleText": "WeChat", ...
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  }
}

/app.wxss 定义css样式

/pages 目录下是我们自定义的各个页面,一个页面是一个目录,包含4个文件:此页面的业务逻辑、视图、样式、配置

/app.json 中定义页面时使用没有后缀名

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ], ...
}

这是一个规则,页面的4个文件的名称必须一致,需要用哪个类型的文件时,小程序会自动查找

整体结构就包括:

1.基础代码

app.js 定义小程序 启动、隐藏 等生命周期中做什么处理、全局的函数、数据

app.json 中配置底部导航的标签、都有哪些页面 等全局信息

app.wxss 中定义好小程序的基本样式

2.页面详细代码

每添加一个页面时,就在 /pages 目录下新建一个页面子目录,其中编写页面代码

wxml 中定义页面的布局结构、都有哪些组件(例如 图片、表单)、绑定数据、绑定事件处理函数

js 中定义这个页面所需要的数据、各个生命周期(例如 页面加载、卸载)中的处理逻辑、事件处理函数

json 中定义此页面的个性配置

wxss 中定义此页面的个性样式

逻辑层

响应式数据绑定

页面中的数据变化不需要我们手动更新,被绑定的数据发生变化时,页面会自动更新

例如

// 页面的视图代码

<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>

其中绑定了name的数据,还定义了一个按钮,点击后会触发 changeName 方法

// 页面的逻辑代码

Page({
  data: {
    name: 'ABC'
  },
  changeName: function(e) {
    this.setData({
      name: '123'
    })
  }
})

开始时页面会显示 ‘Hello ABC!’

点击按钮后触发 changeName 方法,其中修改了 name 的值为 ‘123’,页面便会更新为 ‘Hello 123!’

API

提供的API很丰富,例如:文件的上传下载、WebSocket、录音、拍照、录视频、本地数据存储、GPS、重力感应、罗盘、支付 ……

模块化

支持模块化的开发,可以将一些公共代码抽离成为一个单独的js文件,作为一个模块,通过 module.exports 和 require 对模块进行暴露和引用

示例

定义模块

//common.js

function sayHello(name) {
  console.log('Hello ' + name + '!')
}

module.exports.sayHello = sayHello

调用模块

var common = require('common.js')
Page({
  hello: function() {
    common.sayHello('MINA')
  }
})

视图层

组件

视图由一个个的组件构成,例如 按钮、输入框、进度条、文本、图片、视频、对话框 ……

<view>
  <button>按钮</button>
  <checkbox-group>
    <checkbox value="" checked="true"/>北京
    <checkbox value="" checked=""/>上海
  </checkbox-group>
  <loading>加载中...</loading>
</view>

逻辑处理

1. 循环

初始数据

Page({
  data: {
    items: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

循环显示

<view wx:for="{{items}}">
  {{index}}: {{item.message}}
</view>
2.条件判断

用 wx:if="{{condition}}" 来判断是否需要渲染该代码块,例如

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

事件

组件上绑定事件

<view bindtap="bindViewTap">组件</view>

js中定义事件处理函数

Page({
  bindViewTap:function(event){
    ...
  }
})

模板

<!-- 定义2个模板 -->
<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
    <!-- 根据条件动态选择模板 -->
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

小结

小程序的整理结构很简洁,逻辑层是基础的JS+API,视图层需要我们好好熟悉一下各个组件及其属性

原文发布于微信公众号 - 性能与架构(yogoup)

原文发表时间:2016-09-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏jojo的技术小屋

原 Vue.js、vue安装步骤、单文件组

作者:汪娇娇 时间:2017年8月30日 1、npm淘宝镜像 直接用npm安装vue-cli会特别慢,在安装vue-cli之前可以先安装一个淘宝镜像。之后的安装...

3194
来自专栏PHP在线

CHROME开发者工具的小技巧

Chrome的开发者工具是个很强大的东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知,所以,写下这篇文章罗列一下可能你所不知道的功能,有的功能可能...

34910
来自专栏Petrichor的专栏

tkinter: 事件 & 绑定 (Events and Bindings)

1212
来自专栏Jerry的SAP技术分享

将Chrome调试器里的JavaScript变量保存成本地JSON文件

前端开发的朋友们可能会遇到这个需求:将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个PDF文件。如果采用屏幕截图的话,默认Windows操作系统的截...

2973
来自专栏ytkah

小程序提升界面使用体验 丰富了内容展示组件

  昨晚,微信小程序开放了更多页面内能力,主要是提升界面使用体验、丰富内容展示组件、完善系统硬件能力,这些能力的提升可以帮助开发者更好地优化使用体验,让用户爱上...

4238
来自专栏计算机视觉与深度学习基础

个人vim配置文件

runtime! debian.vim if has("syntax") syntax on endif if filereadable("/etc/vim...

2575
来自专栏Web 开发

使用jQuery操作data-attr的注意事项

data-attr是HTML5里面的一个新属性(其实这东西都好多年了),方便CSS\JS去读取DOM上面的属性值。

720
来自专栏Ken的杂谈

JS/Jquery解决回车键触发表单提交问题

因为现在大多数浏览器,当表单中的文本框或其他可提交元素为当前焦点时,敲回车键就会触发表单提交。

1262
来自专栏我的博客

EclipsePHP studio使用集锦

ps:以前一直用dw编辑php,今天打算尝试新的编辑器使用(其实中间使用过gedit,notepad++,editor等) 今天打算彻底在windows下使用e...

3264
来自专栏码代码的陈同学

5行代码为你的博客引入fancybox

官方Demo code很简单,将需要处理的 img 标签放到一个有 data-fancybox="gallery" 属性的 a 标签中即可,*href* 属性配...

2364

扫码关注云+社区

领取腾讯云代金券