1、应用目录结构
一个微信小程序 App 里面可能有多个界面,每一个界面包含四个文件(.js、.json、.wxml、.wxss),一般每一个界面所包含的文件存放到一个文件夹,然后将所有界面的文件夹存放到 pages 根文件夹下。全局 app.json 文件是进行一些全局配置,文件中的 pages 数组用来存储小程序的页面路径,这是一个小程序的页面加载入口。具体的目录结构如下图所示:
2、项目使用 git 管理
打开微信小程序开发工具,创建第一个微信小程序项目之后,为了方便项目代码的管理,最好将代码托管到 GitHub 上。大体步骤如下,首先打开小程序项目所在文件目录,git init、git add .、git commit -m '初始化项目' 这几个步骤初始化本地 git 仓库,并将代码提交到本地仓库区。第二步,到 github 上新建一个空项目,然后复制空项目的地址,再到本地文件目录下进行操作,具体步骤请移步到这里:传送门。
git 小知识:如果在学习小程序的过程中,为了并行管理每个知识点的代码,可以使用打 tag 的方式。每完成一个阶段性的学习之后,需要将其先进行提交:git add .、git commit -m '阶段1',提交之后,给最新提交的代码 git tag <tagname> 打上 tag 。然后通过 git reset HEAD 回退到原始状态,然后在此基础上完成 阶段2 的编码,然后再提交、打 tag、回退 依次循环。也可以通过 git push --tags 将所有tag 版本的代码提交到远程仓库。等结业的时候,可以通过 git tag 罗列出每项 tag,如果向查看哪个知识点,只需要通过 git checkout <taggname> 切换到指定的tag下查看知识点代码。
3、几个基础知识点
(1)小程序的数据绑定 及 mustache语法 {{}}
小程序的数据绑定其实和 vue 很相似,如果向在 home 页面绑定一个数据,只需要到 home.js 文件中声明如下代码即可。
//home.wxml文件中的代码:
<view>Hello {{name}}</view> //页面上会显示: Hello World
<view>Age: {{age}}</view> //页面上会显示: Age: 18
//home.js文件中的代码:
Page({
data:{
name:World,
age:18
}
})
(2)小程序的列表展示 wx:for
小程序的列表展示也和 vue 很相似,如果在 home 页面列表展示 students 数组中的信息,则需要进行如下操作:
//home.wxml文件中的代码:
<view wx:for="{{student}}">{{item.name}}--{{item.age}}</view> //页面会循环展示每个对象
//home.js文件中的代码:
Page({
data:{
students:[
{id:1,name:'erha1',age:18},
{id:2,name:'erha2',age:18},
{id:3,name:'erha3',age:18}
]
}
})
(3)事件监听改变 data
小程序的事件监听和 vue 有所不同,首先是监听事件点击的关键字,小程序是:bindtap,其次是小程序内部没有定制发布订阅者模式来实现数据的双向绑定,所以为了让页面实现响应式,需要通过 setData() 方法来实现。
//home.wxml文件中的代码:
<view>当前数字:{{count}}</view>
<button size="mini",bindtap='handleBtnClick'>+</button>
//home.js文件中的代码:
Page({
data:{
count:0
},
handleBtnClick(){
//this.data.count += 1; //这种方式页面数据不会刷新,因为它不像vue有数据双向绑定的特性
this.setData({ count:this.data.count++ }) //通过 setData() 来实现页面数据的响应式
}
})
4、小程序 MVVM 架构
Vue 的 MVVM 和小程序 MVVM 对比:Vue 是将 Model 层的数据通过数据绑定(Data Bindings)显示到视图层,然后在 View 层通过事件监听(DOM Listeners)来操作 Model 层的数据。小程序的 MVVM 架构是通过底层的 MINA 框架实现的,也是通过 数据绑定 和 DOM监听 。
MVVM 架构之所以好用,是因为 MVVM 架构将开发者从命令式编程转移到了声明式编程(不需要一步步操作 DOM)
(1)DOM Listeners:ViewModel 层可以将 DOM 的监听绑定到 Model 层。
(2)Data Bindings:ViewModel 层可以将数据的变量,响应式的反应到 View 层。