微信小程序开发

一.目录中文件说明

 

1.app.js文件

 

pages:用来记录当前小程序所有页面的路径，其中第一个路径表示首页。

window:所有页面的背景色和文字颜色。

style:全局定义小程序组件样式版本，v2表示最新版样式

2.project.config.json文件

 

app.id:小程序的账号

projectname:项目名称

注意若不想在终端上显示警告信息：project.config.json->seeting->"checkSitMap":false

3.sitemap.json文件

 

用来配置小程序是否允许微信的索引

action:'allow / disallow'

4.页面中的.json文件

 

设置页面中的外观配置，若以app.json冲突，以页面的权重高

5.如何创建小程序页面

 

在app.json中新加路径，会自动按照路径进行创建

 

在小程序中没有H5提供的那些标签了，这里我们需要使用小程序给我们提供的组件。常用的标签有

view:相当于div;

text:相当于span;

image:相当于img

2. 数据绑定

 

数据定义：

引用数据：通过{{}}的方式可以引用数据。

小程序中任何需要获取数据的地方都需要用{{}},包括标签内的属性。

3. 数据渲染

 

渲染层和数据相关。

逻辑层负责产生、处理数据。

逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。

4. 逻辑渲染

wx:if和hidden

wx:if：WXML 中，使用 wx:if=“{{condition}}” 来判断是否需要渲染该代码块

如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

hidden：通过hidden属性也可以进行条件渲染。

wx:if和hidden的异同：

同：都能控制元素的显示与隐藏

异：wx:if在不满足条件的时候会删除掉对应的DOM，hidden属性则是通过display属性设置为none来进行条件渲染。

 

5. 列表渲染

wx:for ：在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

wx:for-index, wx:for-item 用来指定index和item的别名

wx:key：指定列表中项目的唯一的标识符。

要求：需要是列表中唯一的字符串或数字；保留关键字 this： 代表在 for 循环中的 item 本身，并且item本身是唯一的字符串或者数字

作用：能提高重排效率

6. template（模板）

 

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。然后在 内定义代码片段。

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入。

1. APP的生命周期

 

1.onLaunch()

小程序初始化完成时触发，全局只触发一次。参数也可以使用wx.getLaunchOptionsSync 获取。

一般在这个生命周期函数中执行 全局数据 的初始化操作。

2.onShow()

小程序启动，或从后台进入前台显示时触发，可以触发多次。

也可以使用 wx.onAppShow 绑定监听。

3.onHide()

小程序从前台进入后台时触发，可以触发多次。也可以使用 wx.onAppHide 绑定监听。

2. Page的生命周期

 

打开页面的加载顺序：onLoad，onShow，onReady

切换页面时只会加载onShow，onHide

1.onLoad(options)

页面加载时触发。只触发一次，可以在 options中获取到界面跳转的参数。

一般在这个生命周期函数中执行当前页面中的data的初始化操作和判断所需的全局状态（如用户登录状态）等。

2.onShow()

页面显示时触发，可触发多次。

3.onReady()

页面初次渲染完成时触发。只触发一次，代表页面已经准备妥当，可以和视图层进行交互。

注意：对界面内容进行设置的 API 如 wx.setNavigationBarTitle，请在onReady之后进行。

4.onHide()

页面隐藏时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等，可触发多次。

5.onUnload()

页面卸载时触发。如 wx.redirectTo 或 wx.navigateBack 到其他页面时。 一般在这个生命周期函数中执行清除定时器、closeSocket等操作。

3. Component的生命周期

 

微信小程序的组件中的生命周期函数有以下六种，其中最重要的是 created、attached、detached

created：创建

attached ：在页面打开

detached：在页面移除