微信小程序开发思路
小程序还没有完全开放,不能真实体验,但通过文档和开发工具,可以了解到他的开发思路
下面就介绍下小程序的开发方式,希望能帮助有兴趣的朋友对整体思路有个快速了解
整体结构
默认示例项目的目录结构
从后缀名上可以看到,一共有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,视图层需要我们好好熟悉一下各个组件及其属性
- 关于首屏时间采集自动化的解决方案
- javax.net.ssl.SSLHandshakeException: No appropriate protocol (protocol is disabled or cipher suites
- 一次数据库无法登陆的问题及排查 (r3笔记第99天)
- 用深度学习keras的cnn做图像识别分类,准确率达97%
- 短信发送接口被恶意访问的网络攻击事件(三)定位恶意IP的日志分析脚本
- job处理缓慢的性能问题排查与分析(r4笔记第18天)
- 京东商品评论情感分析:数据采集与词向量构造方法
- springboot开启access_log日志输出
- 完美的执行计划导致的性能问题(r4笔记第17天)
- 解决Docker容器时区及时间不同步的问题
- 移动端测试方案--sptt
- 服务端事件EventSource揭秘
- 让docker中的mysql启动时自动执行sql文件
- 通过执行计划中的CONCATENATION分析sql问题(r4笔记第16天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法