微信小程序开发思路

最新推荐文章于 2024-07-02 13:24:52 发布

PHP学习与交流

最新推荐文章于 2024-07-02 13:24:52 发布

阅读量4.6k

点赞数

分类专栏： JQUERY 文章标签：微信

JQUERY 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

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

整体结构

默认示例项目的目录结构

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

js 逻辑代码
wxml 视图文件
wxss 样式文件
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，视图层需要我们好好熟悉一下各个组件及其属性

原文地址：http://mp.weixin.qq.com/s?__biz=MzA4Nzc4MjI4MQ==&mid=2652402251&idx=1&sn=7def28c39dee97b247cfa347705029cd&mpshare=1&scene=1&srcid=09302hSySZYkHEvAzRP2PDbg#rd