让你的创意展示在更多的人面前——微信小程序开发

一、整体分析

（一）结构分析

1. pages文件夹：小程序各个页面

1. pages\index:主入口

2. index.js:页面逻辑文件

3. index.json：页面配置文件

4. index.wxml：页面主要文件，类似html

5. index.wxss：页面主要外观，类似css

6. app.json：全局配置

7. app.wxss：全局外观

8. app.js：全局脚本，如生命周期函数

2.app.json配置

1. 页面控制

在app.json的pages内增加，工具会自动增加页面文件夹；删除文件夹后需在app.json的pages内删除，并检查引用。

2. 窗口样式

在window内可以设置：

属性名	类型	默认值	说明
navigationBarTitleText	String	-	导航栏标题文字
navigationBarBackgroundColor	HexColor	#000000	导航栏背景色
navigationBarTextStyle	String	white	标题颜色 (black/white)
backgroundColor	HexColor	#ffffff	窗口背景色
backgroundTextStyle	String	dark	下拉 loading 样式 (dark/light)
enablePullDownRefresh	Boolean	false	是否开启下拉刷新
onReachBottomDistance	Number	50	上拉触底距离 (px)

3. 底部导航栏

自定义参考：基础能力 / 自定义 tabBar

属性	类型	必填	默认值	描述
position	String	否	bottom	位置，bottom/top
borderStyle	String	否	black	上边框的颜色，black/white
color	HexColor	否		文字未选中时的颜色
selectedColor	HexColor	否		文字选中时的颜色
backgroundColor	HexColor	否		背景色
list	Array	是		页签的列表，2个~5个

属性	类型	必填	描述
pagePath	String	是	页面路径，必须在pages中预先定义
text	String	是	tab上显示的文字
iconPath	String	否	未选中时的图标路径；当postion为top时，不显示icon
selectedIconPath	String	否	选中时的图标路径；当postion为top时，不显示icon

二、wxml的语法

作用	wxml
块布局	<view>
文字	<text>
滚动区域	<scroll-view>
图片	<image src="地址">

三、列表渲染

wx:for

在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item

<view wx: for="{{array}}">
{{index}}: {{item}}
</view>

Page({
    data: {
        array: ['第一项','第二项','第三项']
    }
})

使用wx:for-item可以指定数组当前元素的变量名,使用wx:for-index可以指定数组当前下标的变量 名:

<view wx: for="{ {array}}" wx:for-index="idx" wx: for-item="itemName">
{{idx}}: {{itemName}}
</view>

小程序在进行列表渲染时,建议为渲染出来的列表项指定唯一的key值,从而提高渲染的效率。如果我们 的wx:for循环没有wx:key则会出现如下警告:提醒我们使用wx:key,使组件保持自身的状态并且提高 渲染效率。

<view wx:for="{{array}}" wx:key="index">索引:{{index}}----名称:{{item}}</view>

四、绑定事件bandtap

使用bindtap="方法名"来定义点击时调用方法，在js文件中使用mathods:{}定义方法。

五、生命周期函数

onShow(){}定义展示当前页时执行的函数。