微信小程序开发实战分享—1.基础知识(1)

微信小程序开发实战分享—1.基础知识(1）

1.微信小程序的语法与vueJS类似，没学过vueJS的同学尽量先过一遍vue再看本教程。

教育小程序开发，www.zhaoweb.cn
首先在微信平台中注册一个账号获得开发者AppID，如下载微信小程序的开发者工具，安装完毕后打开开发者工具创建一个项目，将项目名称位置AppID填入即可。
我的小程序开发网站，可以逛逛

2 文件目录及每个文件的功能

微信小程序的文件有四类，分别是.wxml文件，.wxss文件，.js文件，.json文件。 其中.wxml对应.html文件，.wxss文件对应.css文件，.json文件是配置文件。

pages文件夹中每一个文件夹代表一个页面，新建的项目有两个页面，分别四index和logs页面，每个页面包含一个.js文件，一个.wxml文件，一个.wxss文件以及一个.json文件。四类文件的作用稍后会讲到。

utils文件存放的是工具类，这个文件夹是非必须的，可以直接删掉。

project.config.json与sitemap.json初学者可以暂时不理会。

2.1 .wxml文件
.wxml文件类似我们写的.html文件，但标签上有些不同。

使用标签代替

，使用 代替 ，使用标签代替，引入 标签等等，后续做项目的时候会了解到更多标签。

获取头像昵称 {{userInfo.nickName}} {{motto}} 复制代码 2.2 .wxss文件 .wxss文件就是.css文件。在app.wxss中控制全局样式，在pages文件夹中的页面文件的.wxss文件中控制局部样式。局部样式的优先级大于全局样式。

微信小程序推荐的布局方式是弹性布局,使用弹性布局可以很快速的搭建我们的项目。

微信小程序为了适配多种不同屏幕大小的设备，采取了一种的响应式单位rpx，使用rpx单位就好像使用百分比作为单位一样实现响应式布局。rpx是一种相对大小，我们使用iphone6的机型时，1px=2rpx，iphone6的大小为375px667px，对于的rpx为750rpx1334rpx。关于rpx的更多了解见wxss.html#尺寸单位

2.3 .json文件
.json文件是项目的配置文件

//-新建项目的app.json文件
{
“pages”: [
“pages/index/index”,
“pages/logs/logs”
],
“window”: {
“backgroundTextStyle”: “light”,
“navigationBarBackgroundColor”: “#fff”,
“navigationBarTitleText”: “WeChat”,
“navigationBarTextStyle”: “black”
},
“sitemapLocation”: “sitemap.json”
}
复制代码
pages是存放所有页面的数组,每一个使用到的页面都需要写入pages内，不需要写文件后缀，window属性配置的是状态栏的样式，如navigationBarBackgroundColor用于设置背景色，navigationBarTitleText设置状态栏显示的文本，navigationBarTextStyle设置状态栏文本的颜色，只能传入black/white，除此之外还可以配置底部导航栏tabBar等等。

app.json文件进行全局配置，每个页面文件夹下还有一个.json文件用于局部配置，局部配置只能配置window属性

//局部配置.json文件,这里的配置会覆盖app.json中的window属性
{
“backgroundTextStyle”: “light”,
“navigationBarBackgroundColor”: “#fff”,
“navigationBarTitleText”: “WeChat”,
“navigationBarTextStyle”: “black”
}
复制代码
注意事项

必须用一对大括号将属性包围起来，写成json字符串的格式。
属性名必须用双引号包围起来.
.json文件中不可以写注释。
2.4.js文件
小程序的生命周期分为应用声明周期和页面生命周期，应用声明周期函数在app.js中定义，且在小程序运行过程中一直存在内存中处于运行状态，在这里可以定义应用声明周期函数以及定义全局变量。每个页面中的.js文件中则可以定义页面声明周期函数等，语法类似vueJS。

小程序为了提高性能，是不允许开发者操作DOM元素的。

//新建项目的app.js文件，通过App方法声明
App({
onLaunch: function () {
//页面渲染前执行
},
globalData: {
//定义全局变量
userInfo: null
}
});
//页面的.js文件，通过Page方法声明
Page({

});