小程序
1,小程序简介:
不需要下载安装即可使用的应用,实现了“触手可及”的梦想,用户扫一扫或者搜一下即可下载
也体现了“用完即走”的理念,用户不关心是否安装太多应用的问题
微信布局:
不仅是聊天平台,更多是服务的平台:订机票,打车,订餐,但是一般还是会使用官方app,因为服务号不能满足用户的需求,所以有了应用号,但是后来改名叫小程序;因为在苹果上线的时候,里边有应用两个字,不符合规范
非技术层面:体验近乎于原生app,代替了服务号,在服务平台的一个布局
技术层面:传统开发模型,就要移动操作系统之上,直接开发应用程序;微信也是基于安卓或者IOS上的一个app, 微信本身的业务会变得很小,取而代之的是小程序代替了很大的部分,
混合式应用开发:通过web开发一些web应用程序,通过cordova/phoneGap等方式运行在安卓或者IOS平台
微信: 开发了应用程序 通过微信提供的平台,运行在iOS或者安卓上
小程序能做什么?
搭建开发环境 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
VScode 内核,和他很像
2. 小程序的项目结构:
1)首先,找到应用程序的配置文件app.json: 跟页面外观设置的一些变化;
- ‘’Pages’’ 几个页面
- “windows” 导航条,文字背景,文字,颜色等
- 打开开发文档,框架中,配置,有很多示例,可以参考
2)app.js 启动文件
3)app.wxss 样式文件: 全局样式,全局共享的
4)pages 文件夹
- index文件夹
- index.js 完成页面的逻辑:功能实现等操作
- index.wxml (weixin markup language)基于xml,必须有开始结束标签, 定义页面结构
- index.wxss (weixin style sheet) 完全遵循css, 在单位这点比css高级(rpx),定义页面样式
- logs文件夹:
- logs.json 实际上覆盖app.json中windows的定义一些选项; 这个文件可有可无
- logs,wxss 可有可无
页面文件组成
3. 小程序下的配置
配置内容:app.json 指定项目信息,窗口颜色样式,tab栏的组成,
页面配置:page.json 会覆盖app.json中windows的内容,只是windows
标签栏的配置:app.json 下 tabBar 每个标签栏点击后的页面 ;tabBar 是一个对象,最重要的属性list:[是一个数组,指定tab栏中有多少个tab标签], 必须是两个或两个以上,五个以内的的成员才能体现出来
Sitemap 配置-了解: 小程序内搜索,建立索引,
4, 逻辑与界面分离结构
4.1 逻辑层:
JS完成,业务数据供给界面,界面触发事件进行处理
- 逻辑层的JS文件:
-1,小程序不是运行在浏览器中,所以没有BOM(Windows), DOM(document)对象
-2,小程序中有一些额外的成员:
App() 用于定义应用程序实例对象;
page() 用于定义页面对象;
getApp() 获取全局应用实例对象;
getCurrentPages() 用来获取当前页面的调用栈,越早访问历史栈在最底下(数组,最后一个就是当前页面)
wx 对象用来提供核心API
-3。小程序的JS支持CommonJS规范的 :文件和文件是如何相互组织和协调的
4.2 界面层:
页面结构(WXML),页面样式(WXSS),展示逻辑层的数据
1) 数据绑定:
- 动态数据兼容到模板中,做一个界面上的呈现;
- Mustache语法(双大括号){ { }} 将变量包裹起来
<!--index.wxml--> <view class="container"> <!-- the framework : make the developer follows the fixed regulation to write code
1,where is the data? [in the data attribute of the html page object ] 2,binding to where? [wherever you want just use mustache grammer{ {}}] -->
<!--{ {}} mustache grammer --> <text>{ {message}}</text> <text>{ {person.name}}</text>
<!-- you can output inner tag; or in the attribute of the tag --> <view class="{ {viewClassName}}"></view>
<!-- you can also add to the inner class mustache grammer { {}} use : 1,inner elements 2, attribute of the elements 3, can't use in tag name or attribute; just for value --> <view class="add { {viewClassName}}"></view>
<text>{ {'hello'}}</text> <text>{ {11111}}</text> <text>{ {1111 + 9999}}</text> <text>{ {100>50?'okay, you are right~':'sorry :D'}}</text>
<!-- checkbox add the checked='false' is also checked; cause they think its a string; you need to use { {}} : if the grammer is under misunderstand situation use { {}} --> <checkbox checked="{ {false}}"></checkbox |