微信小程序windows布局，布局方式，目录结构，页面配置，生命周期

1、小程序的项目结构

pages文件夹 - - - 存放页面的文件夹

utils - - - 工具文件夹 （可删除）

eslintrc.js - - - 格式化代码 （不需要管）

app.js - - - 小程序的逻辑，必不可少

app.json - - - 全局的配置文件，必不可少

app.wxss - - - 全局的样式文件；小程序 样式中 不可以使用 *{}

project.congfig.js - - - 项目配置文件

sitemap.json - - - 站点地图

        - - SEO（用于检索网站）TDK：T（title:标题）D（description:描述）K（keywords:关键字）搜索引擎会派出爬虫出询问站点。

 

 

2、小程序页面

小程序页面由四个文件组成。

小程序的文件结构：

wxml - - - 页面结构

wxss - - - 页面样式

js - - - 逻辑处理

json - - - 配置文件

html中的文件结构：

html - - - 页面结构

css - - - 页面样式

js - - - 逻辑

vue中的文件结构：

template - - - 页面结构

script - - - 逻辑

style - - - 样式

3、button用法

 

        在小程序中button不可以用别的组件替换，因为button有一个open-type属性，代表你是否有微信开放能力，所以说在微信小程序开发的过程中，不允许用任何组件代替button的点击事件。

 

4、使用小程序组件需要注意的一点

 

        小程序里面可以使用html5标签，只是小程序不会按html5原来地特点去渲染，就是说，原来html5里面的div是一个块级元素，但是在小程序里面他只是一个行内元素，所以说，写微信小程序时，不建议使用html5的标签，还是用微信小程序提供的组件更为合适。

 

5、wxss（页面样式）用于描述wxml（页面结构）

 

在HTML5中的类，id，属性选择器，等等都可以使用，写样式的时候不可以是sass的格式

 

6、小程序的布局像素单位

 

       rpx：微信小程序像素单位，它是响应式像素，随着页面的宽度自适应。

 

7、平常常用的几种布局方式

 

流式布局

弹性盒布局

百分比布局

rem布局

定位

浮动

8、布局像素单位

 

px：绝对单位

em：相对于父级元素

rem：相对于根元素的字体大小进行自适应

 

9、rem是移动端的自适应单位

 

自适应：rem，媒体查询

 

10、小程序单位换算

 

350px = 750rpx    

0.5px = 1rpx

它是等比例缩放的，按照不同型号的手机尺寸，比例也会所之变大或变小。

 

11、小程序设置全宽的三种方式（但不是自适应的,还是需要自己去换算，才可以实现自适应）

 

width: 100%;

width: 100vw;

width: 750rpx;

 

12、手机宽度为 ：a px，求出1rpx等于多少px？

rpx： 是微信小程序独有的，解决屏幕自适应的尺寸单位

 

可以根据屏幕宽度进行自适应，不论屏幕大小，规定屏幕宽为 750rpx

通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕上，可以实现自动适配

以 iPhone6 为例，iPhone6 的屏幕宽度为 375px ，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，也就是 1rpx = 0.5px = 1 物理像素 ，因为设计师的图一般是二倍图，所以在iphone6下直接使用测量出来的值来设置rpx就可以了

        1rpx = a / 750rpx;

 

13、全局样式引入外联样式方法？

 

        @import  "所在路径";        注意点：（必须加分号）

 

14、小程序的全局配置文件

 

        app.json中的pages：pages是个数组---小程序页面的路径表；相当于vue中的路由；

 

        pages中的注意点：

 

        pages数组中的第一个路径尤为重要，小程序第一个进来的就是数组的第一个路径（第一个很重要，多是小程序的加载页面），其它的页面不重要。

 

15、全局配置中window中的属性？

 

"window" : {

    "backgroundTextStyle" : "dark",            // (下拉刷新的文字颜色)，dark/light二选一

    "backgroundColor" : "#000",                // (下拉刷新的背景颜色)，必须为十六进制颜色值

    "navigationBarTitleText" : "拳王争霸赛",    // (导航栏的文本标题)

    "navigationBarTextStyle" : "white",         // (导航栏的文本颜色),white/block二选一

    "navigationBarBackgroundColor" : "#f00"     // (导航栏的背景颜色)

    "enablePullDownRefresh" : true,             // 开启下拉刷新页面 ，false为关闭

    "onReachBottomDistance" : 50,        //上翻到底距离五十时，刷新页面 (默认50，可自行设置值) 

    "navigationStyle" : "default"        // 自定义导航栏,默认值default,可以custom自定义导航栏

}

16、小程序的页面配置

 

 

 

 

 17、tabBar如何配置？

 

tabBar与window同级，在window的下面进行配置

 

"tabBar": {

    "selectedColor": "#f00",            //  选中文本的颜色

    "color": "#f0s",                    //  默认颜色

    "backgroundColor": "white",         //  背景颜色

    "borderStyle": "black",             //  边框颜色    black/white二选一

    "position": "bottom",    //  tabBar位置  默认bottom，贴于最下方，top最上方，不显示图标

    "list": [{                                  //   一个list数组（自带）

      "text": "首页",                               // 导航的文本

      "pagePath": "pages/index/index",              // 导航的路径    

      "iconPath": "./tab-icon/home.png",            //  为选中图标的路径

      "selectedIconPath": "./tab-icon/home.png"     // 被选中的图标的路径

    },{

      "text": "aaa",

      "pagePath": "pages/aaa/aaa",

      "iconPath": "./tab-icon/home.png",

      "selectedIconPath": "./tab-icon/home.png"

    }]

  },

 

18、页面全局配置与局部配置的关系？

 

局部配置的优先级远远大于全局配置的优先级，另外局部页面不可以配置tabBar

 

19、vue的生命周期                       （官方11个）

 

创建前后 - - - 挂在前后 - - - 更新前后 - - - 销毁前后 - - - activted :激活/停用  - - - error捕获错误

 

创建阶段四个：

 

创建前后：

 

beforeCreate：实例创建之前

created：实例创建之后

挂载前后：

 

beforeMount ：组件挂载之前。

mounted：组件挂载之后。

运行阶段的两个：

 

更新前后：

 

beforeUpdate：数据改变，试图更新之前。

updated：试图更新之后。

销毁前后：

 

beforeDestroy：实例销毁之前。

destroyed：实例销毁之后 。

其他三个：

 

actived被keep-alive缓存的组件激活时调用。

deactived被keep-alive缓存的组件停用时调用。

errorCaptured 2.5.0+  新增当捕获一个来自子孙组件的错误时被调用。

20、小程序的生命周期

 

小程序的生命周期包括：

 

应用的生命周期

页面的生命周期

组件的生命周期

 

21、小程序的应用生命周期（在全局的配置文件里面 - - - app.js）

 

onLaunch(){}                应用初始化的时候调用，一般用于授权登录

onHide(){}                     应用切换到后台/隐藏时调用

onShow(){}                    应用切换到前台/显示时调用

onError(){}                     应用检测到错误时调用

 

22、小程序的页面生命周期（在单个页面的配置文件里面 - - - index.js）        共7个

 

onLoad(){}                 页面加载时调用

onShow(){}                页面显示/切入前台时调用

onReady(){}               页面初次渲染完成时调用

onHide(){}                  页面隐藏/切入后台时调用

onUnload(){}               页面卸载时触发

onPullDownRefresh(){}            页面下拉刷新时调用

onReachBottom(){}                页面上翻到底时调用