一,框架全局文件

1,app.js小程序逻辑文件

这里用来定义全局数据和函数的使用,其他页面引用app.js文件之后就可以直接使用。
还可以指定小程序的生命周期函数


对应的生命周期函数有:

onLaunch:监听小程序的初始化
onShow:监听小程序的显示
onHide:监听小程序隐藏
onError:监听小程序的错误
onPageNotFound:监听页面不存在

2,app.json小程序公共设置文件

3,app.wxss小程序公共样式表

对所有页面定义一个全局样式。只要页面里面有全局样式里面的class,就可以渲染全局样式里的效果,但如果页面又重新定义了这个class,则会把全局覆盖掉,而使用自己的样式。
用户也可以自行定义样式,然后哪个页面需要使用,就可以直接设置类名使用。

4.,project.config.json小程序个性化配置文件

其实就是开发者工具的界面配置信息,当你换一台电脑,还想用之前的界面配置,就直接把这个文件拷贝过去就行了。

二,工具类文件

就是那个utils文件夹,用来存放工具浪栏的js函数,类比于vue的过滤器。
例如可以放置一些日期格式化的函数、时间格式化的函数等一些常用的函数,定义完这些函数之后,要通过module.exports将定义的函数名称注册进来,在其他页面才能使用。

三,页面框架文件

1,page.js文件

这个文件内有一个page()函数,用来注册页面,接受一个对象,用以指定这个页面的初始数据,生命周期函数,时间处理函数等这个页面的所有业务逻辑处理。

值得注意的是,这里的data为页面初始化数据,作为页面的第一次渲染。data将会以JSON的形式由逻辑层传至渲染层,所以其数据必须是可以转成JSON的格式

2,页面渲染时数据变更

不可以直接修改,而是需要使用Page.prototype.setData()函数,接收一个对象,里面的key是要变更的数据,value是变更后的数据值。
如这个页面的话:

3,微信小程序的数据绑定

单向绑定:

<input value="{{value}}" />

双向绑定:加一个model

<input model:value="{{value}}" />

4,属性的绑定

和数据的绑定用法一致,只是它是把{{}}放置到属性中罢了

5,控制属性的绑定

实际上是v-if一样
true则执行,false则不执行

实现的效果:

6,关键字绑定

如复选框绑定checked={{true}}则是选中

除此之外,{{}}之内还可以进行简单的运算。

小程序学习笔记(5)-目录结构介绍相关推荐

  1. 微信小程序学习笔记一 + 小程序介绍 前置知识

    微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一 微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...

  2. 微信小程序学习笔记(七)----简单文章推荐列表和分类图标的实现

    想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...

  3. 微信小程序学习笔记(1)

    微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构 当开发者新建一个工程时,项目文件包 ...

  4. 小程序学习笔记(1)

    小程序学习笔记(1) 以下是学习期间记录的笔记: 10-18号晚上学习笔记: 小程序实际上是需要下载安装的,只是很小,用户基本上觉察不到 组件是具有一定的功能的代码的集合 移动端适配: 物理像素:是图 ...

  5. 自己的微信小程序学习笔记【3】——第三方UI库Lin-Ui的加载及使用

    其他微信小程序的学习笔记 自己的微信小程序学习笔记[1]--小程序开发工具的使用及项目文件说明 自己的微信小程序学习笔记[2]--从零开始新建项目 文章目录 其他微信小程序的学习笔记 前言 一.Lin ...

  6. 小程序 pagescrollto_微信小程序学习笔记(三)-- 首页及详情页开发

    一.常用组件 在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...

  7. 微信小程序学习笔记(一)

    干货来袭 基础前言   微信⼩程序,简称⼩程序,英⽂名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现 了应⽤"触⼿可及"的梦想,⽤⼾扫⼀扫或搜⼀下即可打开 ...

  8. 微信小程序学习笔记(五) 云开发

    1. 云开发简介 1.1 什么是云开发 微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务. 开发者可以使用云开发快速开发小程序.小游戏.公众号网页等,并且原生打通微信开放能力. 开发者无需搭建 ...

  9. 小程序 - 学习笔记

     一.小程序文档笔记 默认开发目录 开发目录解析 1.  app.js.app.json.app.wxss 这三个文件必须有不能删掉. 一个小程序主体部分由这三个文件组成,而且必须放在项目的根目录 j ...

  10. 微信小程序学习笔记( 小程序框架 )

    必看 这个只是我的学习过程算是日记形式吧,过程是按微信的官方文档的循序来,从 指南中的小程序框架 开始,指南中这一节之前还有页面配置,目录结构,还有很多介绍,没有写但是是非常重要的,一定要看,像指南后 ...

最新文章

  1. 关于android:id=@+id/xx的理解
  2. 【软件工程】CMMI 能力成熟度模型集成 ( 简介 | 相关术语 | CMMI 等级评估次序 )
  3. 【SSL】Tomcat8.5 SSL/HTTPS 安装证书 单向认证
  4. Java 并发编程—有锁互斥机制及AQS理论
  5. tomcat和idea都占用了8080_详解IDEA 启动tomcat 端口占用原因以及解决方法( 使用debug模式)...
  6. 谷歌用3亿张图做了个深度学习实验,结论:数据还是越大越好
  7. Cplex安装教程与使用介绍
  8. TCP报文段首部格式
  9. 海思制作EXT4文件系统工具make_ext4fs
  10. 美女老师,大数据直播,老师做了什么,让全场尴尬。
  11. 计算机连接网络是飞行模式怎么办,电脑wifi界面只有飞行模式怎么办
  12. 力扣:714.买卖股票的最佳时机含手续费
  13. 什么是独立主机?独立主机的优势有些?
  14. MySQL系列之STRAIGHT JOIN用法简介
  15. WKwebview弹框报错Attempt to present UIAlertController on XXwhich is already presenting (null)
  16. 软件工程导论E-R图、盒图(N-S图)、PAD图
  17. 目前福岛高水平辐射量可能由2号反应堆释放
  18. 没有图片显示默认图片
  19. Fortify SCA C#.NET 扫描方法(Visual Studio插件)
  20. 解决360安全卫士卸载不掉问题

热门文章

  1. 让面试官赞扬的IO读取方法:大文件进行词频统计(单线程与多线程分别解决)利用Buffer流简单又快捷
  2. android手机和荣耀哪个版本好,【求测评】荣耀v40轻奢版与荣耀X10哪款更好?图文爆料分析...
  3. UI线程安全 runOnUiThread 和 Handler 一般用法
  4. WPF:将Office文档、任意类型文件嵌入到EXE可执行文件中
  5. SSH(六)hibernate持久层模板于事务管理
  6. 133个Java面试问题列表
  7. 科工网大数据有力促进机器人制造业发展
  8. 关于304缓存 (转沫鱼的前端世界)
  9. performancepoint里面建立数据源的时候,总是发生以下的报警(转的)我也遇到了这个问题...
  10. 面试题之序列化与反序列化