258资源分享网

一、入门

1.app.js

app.js 是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用 MINA提供的丰富的 API，如本例的同步存储及同步读取本地数据。

2.app.json
app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口 背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。

eg: { "pages":[ "pages/index/index", "pages/logs/logs" ] }

// 注意：pages/index/index 最后的index，就包含了index.js index.wxml index.wxss三个文件

3.index.js
index.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。

4..wxss
页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss中指定的样式规则

.json
页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。

6..wxml

布局文件

<!-- logs.wxml --> <view class="container log-list"> </view>

二、生命周期：

在index.js里面：

生命周期是：App Launch -> App Show -> onload -> onShow -> onReady

1)整个app的启动与现实。app的启动在app.js中可配置。
2)进入各个页面的加载显示等。（这里，loading的指示器显示等）。
3)界面跳转：
a)wx.navigateTo(OBJECT):保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
b)wx.redirectTo(OBJECT):关闭当前页面，跳转到应用内的某个页面。
c)wx.nacigateBack():当前页面关闭，回退到前一页面。

三、八大组件

这里可以参考官方文档，比较全面。

四、外部框架

原生的js插件和外部框架都不能使用，因为他们几乎都是操作DOM的内容，而微信应用号不允许操作任何DOM。动态设置的rem.js也不能支持。

五、WebSocket

微信提供WebSocket让我们可以做即时聊天，十分方便。

六、tabBar

*注意：微信的底部菜单最多支持五栏（五个 icons）
tabBar的text属性可以去掉，而且没有text属性的时候，tabBar高度会降低。

七、知识点

1）*注意：wechat开发工具并不完善，每次编辑了哪个页面，必须ctrl + s：保存一下.

2）F5是刷新页面，可以刷新测试的demo界面

*注意：修改wxml和wxss下的内容后，直接 F5 刷新就能直接看到效果，修改js则需点击重启按钮才能看到效果。

3）建议在subline或者webStorm下开发微信小程序

4）基于微信开发工具并不人性化目前，建议在新建页面的时候，首先在app.json的pages中先添加："pages/index/index"，再新建一个wxml文件的同时，把对应的js和wxss文件一起新建好，因为微信应用号的配置特点就是解析到一个wxml文件时，会同时在同级目录下找到同文件名的js和wxss文件.

5）相对于html的

，在小程序中使用

6）使用class名来设置样式，id名在这里基本没有什么用处。原因是主要操作数据，不操作dom。

7）wxss文件是引入的样式文件，可以直接在里面写样式，但是不推荐

eg: eg: @import "wxss/index.css"; body{ background:pink; }

8)app.json中 window是配置顶部的一些样式
tabBar 是配置底部的配置

9)window作用：

用于设置小程序的状态栏，导航栏，标题，窗口背景色。// 窗口指的是页面的back

*注：在app.json中配置的属性会被子window的属性所覆盖。
属性有：
"navigationBarBackgroundColor":"#666666"
"navigationBarTextStyle":"white" // 注意：这里仅支持white/black/light
"navigationBarTitleText":"微信demo" // 导航栏标题文字
"bacgroundColor":"#333333" // 窗口的背景色
"backgroundTextStyle":"dark" // 下拉背景字体，loading图的杨啊是，仅仅支持 dark/light
"enablePullDownRefresh":"false" // 是否开启下拉刷新

10).js文件主要作用逻辑，和生命周期函数处理

11）小程序中的导入：

a).js => require
b).wxss => import

12)在css中display属性作用