微信小程序开发的一些知识点（1）

1. 应用程序入口下最多有五级页面，每级页面可以无限多，但是小程序对整个程序的大小有要求，而且比较小，所以实际开发中，页面是有限制的。
2. app.js，app.json，app.wxss配置全局的，要是在页面和app中都配置了，则使用就近原则
3. 各页面.wxml骨架，.wxss样式，.js逻辑，.json配置
4. 多使用微信小程序的开发文档，里面介绍了开发框架，基础组件，API及相关开发问题：https://developers.weixin.qq.com/miniprogram/dev/index.html
5. 根据开发文档可看到app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下：

{

  "pages":[

    "pages/index/index",

    "pages/logs/logs"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "WeChat",

    "navigationBarTextStyle":"black"

  }

}

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

1. xml骨架的编写流程

先写好容器，然后在容器中添加组件，再在组件中添加元素

1. 写样式要注意的点：

样式固定不变的可以写到wxss中，样式动态改变的一般写到style中，

1. js文件结构

当在编辑器里输入page回车就能使用page函数生成一个页面实例，然后js的文件结构也一目了然，

data：页面的初始数据

一系列的函数：类似监听函数，在不同的阶段执行

onload:function(options):页面初始化，options为页面跳转所带来的参数

onReady:function():页面渲染完成

onShow:function():页面显示

以下两个执行条件请见小程序的事件机制（冒泡与非冒泡）

https://blog.csdn.net/qq_37117521/article/details/82467659

onHide:function():页面隐藏

onUnload:function():页面关闭

可以使用console.log(“XXX执行啦”)在控制台打印输出，查看各函数执行顺序

执行顺序onload，onshow，onready

还能自定义函数，变量

 

 

 

1. 数据绑定：

在data中赋值属性就行，如date:”nov 18 2016”,然后在wxml文件中要使用的位置{{date}}使用这样的格式引用即可，可以引用绑定多个。

1. var post_content={

date:”nov 18 2016”,

img:{

       post_img:” ”,

       author_img:” ”//引用的时候再前面多加上img.即可，嵌套了几层写几层

}

…….

}

this.setData(post_content1);

如上等同于直接在data中平铺赋值

 

注意：小程序在解析属性字符串的时候，会解析成布尔值，所以只要有值就会为真

如在设置swiper水平或者垂直轮播的时候，设置vertical=”false”时仍然会是垂直轮播。

所以要设置为false的时候可以写成vertical=“{{false}}”

 

 

 

1. 使用block标签把要循环的标签包裹起来

<block wx:for=’’{{posts_content}}’’ wx:key=" posts_content" ></block>

wx:for循环里填的是数组或者集合变量

wx:for-index:index默认子元素的序号

wx:for-item:“item”默认子元素

 

不添加wx:key情况：

<block wx:for-items="{{userInfoList}}" >，会出现warning： Now you can provide attr "wx:key" for a "wx:for" to improve performance. 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

推荐array 的 每一个item都添加一个唯一识别的property来管理，这样就可以去掉warning，如果使用保留关键字，好像会出现显示的item都是最后一个的

 

<block wx:for-items="{{userInfoList}}" wx:key="userInfoListId">