微信小程序开发官方文档解读
创建页面
在这个教程里,我们有两个页面,index 页面和 logs 页面,即欢迎页和小程序启动日志的展示页,他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。
每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js
后缀的文件是脚本文件,.json
后缀的文件是配置文件,.wxss
后缀的是样式表文件,.wxml
后缀的文件是页面结构文件。
响应的数据绑定
框架的核心是一个响应的数据绑定系统。
整个系统分为两块视图层(View)和逻辑层(App Service)
框架可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。
通过这个简单的例子来看:
<!-- This is our View -->
<view> Hello {{name}}! </view> <button bindtap="changeName"> Click me! </button>
// This is our App Service.
// This is our data.
var helloData = {name: 'WeChat'
}// Register a Page. Page({ data: helloData, changeName: function(e) { // sent data change to view this.setData({ name: 'MINA' }) } })
- 开发者通过框架将逻辑层数据中的
name
与视图层的name
进行了绑定,所以在页面一打开的时候会显示Hello WeChat!
- 当点击按钮的时候,视图层会发送
changeName
的事件给逻辑层,逻辑层找到对应的事件处理函数 - 逻辑层执行了
setData
的操作,将 name 从WeChat
变为MINA
,因为该数据和视图层已经绑定了,从而视图层会自动改变为Hello MINA!
。
===============================================================
文件结构
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
文件 | 必填 | 作用 |
---|---|---|
app.js | 是 | 小程序逻辑 |
app.json | 是 | 小程序公共设置 |
app.wxss | 否 | 小程序公共样式表 |
一个小程序页面由四个文件组成,分别是:
文件类型 | 必填 | 作用 |
---|---|---|
js | 是 | 页面逻辑 |
wxml | 是 | 页面结构 |
wxss | 否 | 页面样式表 |
json | 否 | 页面配置 |
===========================================================================
配置
app.json
文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
以下是一个包含了所有配置选项的 app.json
:
{"pages": ["pages/index/index","pages/logs/index"],"window": {"navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true }
app.json 配置项列表
属性 | 类型 | 必填 | 描述 |
---|---|---|---|
pages | String Array | 是 | 设置页面路径 |
window | Object | 否 | 设置默认页面的窗口表现 |
tabBar | Object | 否 | 设置底部 tab 的表现 |
networkTimeout | Object | 否 | 设置网络超时时间 |
debug | Boolean | 否 | 设置是否开启 debug 模式 |
====================================================================================
import 的作用域
import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。
如:C import B,B import A,在C中可以使用B定义的template
,在B中可以使用A定义的template
,但是C不能使用A定义的template
。
转载于:https://www.cnblogs.com/xiaohouzai/p/7672921.html
微信小程序开发官方文档解读相关推荐
- 微信小程序开发规范文档
微信小程序开发规范文档 摘自: https://shimo.im/docs/EZKacqyM018gmopv/read 目录规范 1.目录概述 组件文件 所有组件相关文件统一放在components目 ...
- 微信小程序开发学习文档(万字总结,一篇搞定前端开发)
一.微信小程序简介 与网页开发不同,小程序有自己的一套标准开发模式:-申请小程序开发账号-安装小程序开发工具-创建和配置小程序项目 1.1 创建第一个小程序 1.2 主界面的5个组成部分 1.3小程序 ...
- node.js 微信小程序 部署服务器_微信小程序开发入门(一),Nodejs搭建本地服务器...
1. 如何模拟真实环境中,读取服务端数据,首先需要使用Nodejs搭建一个本地服务器的环境. 在搭建web服务器之前,需要先安装node.js(安装版本最好为6.9.x) 安装后node.js,接下 ...
- 微信小程序开发语言的选择
微信使用的开发语言和文件很「特殊」. 小程序所使用的程序文件类型大致分为以下几种: ①WXML(WeiXin Mark Language,微信标记语言) ②WXSS(WeiXin Style Shee ...
- 微信小程序开发准备:
以下的知识都是学习开发前应该了解一下的. 微信使用的开发语言和文件很特殊. 小程序所使用的程序文件类型大致分为以下几种: WXML(WeiXin Mark Language,微信标记语言) WXSS( ...
- 微信小程序开发:获取位置打开地图
目录 01 准备工作 02 小程序基础知识 微信小程序的四种类型的文件 app.json app.js app.wxss app.wxml 目录树 03 获取位置打开地图 参考 效果 程序说明 04 ...
- 【微信小程序宝典】从零开始做微信小程序开发NO.2
2019独角兽企业重金招聘Python工程师标准>>> 为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习: 首先感谢几位给予建议的同学, ...
- 微信小程序开发常见warnings警告解决方案
在小程序开发过程中,只要稍不注意代码细节,就会出现很多 warnings 警告,虽然在对小程序的运行并没有什么影响,但是作为一名严谨的程序猿,是不允许它们存在的. 下面我将从我的实际项目开发过程中碰到 ...
- 微信小程序:新功能WXS解读(2017.08.30新增)
注意(来自官方文档) wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行. wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致. wxs 的 ...
- 微信小程序游戏开发文档以及开发工具地址
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 微信官方于 2017 - 12 - 28 日 开发微信小程序 开发小游戏 , 微信小程序小游戏开发官方 ...
最新文章
- IntelliJ IDEA注册码
- 2019年,比特币现金爱好者线下见面会发展至6大洲30个国家
- MongoDB[mark]总忘记它们是干啥的
- linux Kernel Map
- 精品:Spline导数及曲率计算(判断曲线的弯曲程度)
- 《机械原理》上 学后感
- 计算机网络和internet选项,internet选项在哪
- n个人围成一圈,顺序编号。从第一个人开始从1到m报数,凡报到m的人退出圈子,编程求解最后留下的人的初始编号。
- 【python脚本系列】Midi数字化乐器接口
- 青青日记app界面原型
- Microsoft SQL Server认证方式的修改
- Double的compareTo
- MA、EMA、SMA、DMA、TMA、WMA
- MYSQL正则匹配手机号码
- 【MySQL数据库开发之一】Mac下配置安装数据库-MySQL
- MVP进阶及OKHttp上传图片
- uniapp使用输入框固定在底部键盘弹起把输入框挡住问题
- 计算机文化基础西安航空学院知到答案,HBsAg阳性,抗-HBe阳性,抗-HBc阳性,表明...
- 人性的弱点-读书总结
- html页面打印调用jqprint.js