微信小程序第二章总结

小程序的基本目录结构

项目主目录

pages：所有页面，一个页面一个文件夹，设置页面路径

utils：工具包存放+

主体文件

app.js:小程序逻辑文件，用来注册小程序全局实例

app.json:小程序公共设置文件，配置小程序全局设置

app.wxss:小程序主样式表文件，设置小程序样式

页面文件

.js文件:页面逻辑文件

.wxml文件:页面结构文件

.wxss文件:页面样式文件

.json文件:页面配置文件

小程序的开发框架

视图层

将数据进行处理后将视图展现出来

逻辑层:

增加app和page方法，进行程序和 页面注册

提供丰富的api，如扫一扫，微信支付的能力

每个页面有独立的作用域，并提供模块化能力

数据层:

页面临时数据或存储

文件存储

网络存储与调用

创建小程序页面

 删除原本pages下index,在app.json中删除第一句路径

进行编译，形成新页面

在pages下新建一个文件夹，命名，新建四个必要文件

在nihao.json中输入路径

"pages/nihao/nihao",

在json文件输入大括号

在js文件输入

Page({
})

在wxml文件中输入文字

<text>开心就好</text>

进行编译

运行成功！

配置文件

window配置项

navigationBarBackgroundColor：导航栏背景色

navigationBarTextStyle：导航栏标题颜色

navigationBarTitleText：导航栏标题文字内容

backgroundColor：下拉刷新窗口的背景色

backgroundTextStyle：下拉背景字体

enablePullDownRefresh：是否开启下拉刷新

运行代码

"window": {
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle":"black",
"navigationBarTitleText": "微信小程序",
"backgroundColor": "#ccc",
"backgroundTextStyle": "light"
  },

tabBar配置项

color：标签页上的文字默认颜色

selectedColor：标签页上的文字被选中时呈现的颜色

borderStyle：标签页上的背景色

backgroundColor：标签条之上的框线颜色

list：标签页列表

运行代码

"tabBar": {
  "color": "#666666",
  "selectedColor": "#ff0000",
  "borderStyle":"black",
  "backgroundColor": "#ffffff",
  "list": [

运行结果

设置初始数据

Page({
  data: {
name:'lwk',
age:30,
birthday:[{year:1998},{month:11},{date:18}],
object:{hobby:'computer'},
students:[
  {nickname:"tom",height:180,weight:150},
{nickname:"anne",height:160,weight:100}]
  }
 
})
 

设置文件结构

<!--pages/njd.wxml-->
<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>爱好:{{object.hobby}}</view>
<view>逻辑运算:{{age == 40}}</view>
<view>算数运算:{{age +3}}</view>
<view>三元运算:{{1==1 ? 3 : 4}}</view>
<view wx:for="{{students}}">
<text>姓名:{{item.nickname}}</text>
<text>身高:{{item.height}}</text>
<text>姓名:{{item.weight}}</text>
</view>

运行结果