微信小程序开发思路
来源:互联网 发布:无名氏定理 知乎 编辑:程序博客网 时间:2024/05/14 19:41
小程序还没有完全开放,不能真实体验,但通过文档和开发工具,可以了解到他的开发思路
下面就介绍下小程序的开发方式,希望能帮助有兴趣的朋友对整体思路有个快速了解
整体结构
/app.json 中进行小程序全局性的配置,例如 底部导航有哪些标签、共有哪些页面、头部title、背景色……
/app.wxss 定义css样式
/pages 目录下是我们自定义的各个页面,一个页面是一个目录,包含4个文件:此页面的业务逻辑、视图、样式、配置
/app.json 中定义页面时使用没有后缀名
这是一个规则,页面的4个文件的名称必须一致,需要用哪个类型的文件时,小程序会自动查找
整体结构就包括:
1.基础代码
app.js 定义小程序 启动、隐藏 等生命周期中做什么处理、全局的函数、数据
app.json 中配置底部导航的标签、都有哪些页面 等全局信息
app.wxss 中定义好小程序的基本样式
2.页面详细代码
每添加一个页面时,就在 /pages 目录下新建一个页面子目录,其中编写页面代码
wxml 中定义页面的布局结构、都有哪些组件(例如 图片、表单)、绑定数据、绑定事件处理函数
js 中定义这个页面所需要的数据、各个生命周期(例如 页面加载、卸载)中的处理逻辑、事件处理函数
json 中定义此页面的个性配置
wxss 中定义此页面的个性样式
逻辑层
响应式数据绑定
页面中的数据变化不需要我们手动更新,被绑定的数据发生变化时,页面会自动更新
例如
// 页面的逻辑代码
开始时页面会显示 ‘Hello ABC!’
点击按钮后触发 changeName 方法,其中修改了 name 的值为 ‘123’,页面便会更新为 ‘Hello 123!’
调用模块
视图层
组件
视图由一个个的组件构成,例如 按钮、输入框、进度条、文本、图片、视频、对话框 ……
逻辑处理
1. 循环
初始数据
事件
组件上绑定事件
模板
小程序的整理结构很简洁,逻辑层是基础的JS+API,视图层需要我们好好熟悉一下各个组件及其属性
下面就介绍下小程序的开发方式,希望能帮助有兴趣的朋友对整体思路有个快速了解
整体结构
默认示例项目的目录结构
从后缀名上可以看到,一共有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.jsfunction 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
0 0
- 微信小程序开发思路
- 微信小程序开发思路
- 留言板微信小程序开发MVC思路分析
- J2EE程序开发思路
- J2EE程序开发思路
- 面向对象开发程序思路
- 程序开发中解决问题的思路很重要
- 开发思路!
- 开发思路
- 浅析三线程程序开发思路与实现
- 以顺其自然的思路写程序(Thinkvd开发日志)
- linux下电话开发程序编写及运行思路
- 不断总结自己的异构程序开发思路
- 微信小程序dom操作的替代思路
- 界面程序分离思路
- Oracle分页程序思路
- 程序修改思路1
- JAVA 程序写作思路
- 判断IP地址的合法性(Java)
- linux定时备份mysql并同步到其它服务器
- SPSecurity.RunWithElevatedPrivileges exception 80040154
- @@identity与scope_identity()函数的区别
- 小话设计模式(十)外观模式
- 微信小程序开发思路
- My SHA1 Achievement
- Eclipse下开发BPEL-HelloWorld
- [Win32]一个调试器的实现(九)符号模型
- 初始化列表的使用
- Linux如何用rpm安装软件
- 微信小程序 - MINA 框架 学习笔记
- samba 编译安装
- 854计算机基础——《计算机组成原理》考点汇总(二) 系统总线