目录结构
Paste_Image.png
每个小程序都有一个整体的 app 和多个页面 page；
app 部分的结构
app.js; //逻辑文件
app.json; //小程序的配置文件
app.wxss; // 小程序的全局样式表
每个 page 的结构
page.js; // 页面逻辑
page.wxml; //页面结构
page.wxss; //页面样式表
page.json; //页面配置
特别注意
注意：为了方便开发者减少配置项，我们规定描述页面的这四个文件必须具有相同的路径与文件名。
逻辑层 *.js
逻辑层是js编写的。
注意点
- 增加App()和Page()方法，进行注册程序和页面。
- 增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
- 提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
- 每个页面有独立的作用域，并提供模块化能力。
- js的执行环境不是浏览器所以无法使用web中的对象，如： window、document等。
- 开发者写的所有代码最终将会打包成一份 JavaScript，并在小程序启动的时候运行，直到小程序销毁。
app.js 模板
App({
onLaunch: function() { // Do something initial when launch. },
onShow: function() { // Do something when show. },
onHide: function() { // Do something when hide. },
globalData: 'I am global data'}),
apiUrl: 'xxx.xx.com'//可以定义全局变量
});
page.js 模板
//获取应用实例
var app = getApp()
Page({
data: { text: "This is page data." },
onLoad: function(options) { // Do some initialize when page load. },
onReady: function() { // Do something when page ready. },
onShow: function() { // Do something when page show. },
onHide: function() { // Do something when page hide. },
onUnload: function() { // Do something when page close. },
onPullDownRefresh: function() { // Do something when pull down. },
onReachBottom: function() { // Do something when page reach bottom. },
// Event handler.
viewTap: function() {
this.setData({ text: 'Set some data for updating view.' });
// 可以直接获取app上的全局变量函数等等
app.apiUrl;
},
customData: {
hi: 'MINA'
}
})
视图层
WXML 小程序的页面结构
数据绑定
双大括号绑定{{}}
<!-- 简单绑定 -->
<view> {{ message }} </view>
<!-- 组件属性 -->
<view id="id-{{index}}"> </view>
<!-- javascript运算在大括号内都支持 -->
<view id="id-{{index + '123'}}"> </view>
<!-- 逻辑判断控制 -->
<view wx:if="{{length<5}}">1 </view>
<view wx:elif="{{length <2}}"> 2 </view>
<view wx:else> 3 </view>
列表渲染
<!-- 默认方式 -->
<view wx:for="{{array}}"> {{index}}: {{item.message}}</view>
<!-- 自定义 index item -->
<viewwx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">{{idx}}: {{itemName.message}}</view>
WXSS 小程序的样式表
小程序自己的样式表，支持大部分标准css 支持flex
小程序的响应式布局，
- rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
- rem（root em）: 规定屏幕宽度为20rem；1rem = (750/20)rpx 。
选择器 - .class
- #id
- element
- element, element
- ::after
- ::before
组件
这里的组件相当于html中的标签
- 视图容器
- view （相当于html 中的div）
- scroll-view
- swiper (小程序的轮播组件)
- 基础内容
- icon
- text
- progress
- 表单组件
- button
- checkbox
- form
- input
- label
- picker
- radio
- slider
- switch
- textarea
- 导航
- navigator
- 媒体组件
- audio
- image (注意image有个默认的宽320px;高240px)
- video
- 地图
- map
- 画布
- canvas
