管理项目 +
目录
创建新的项目 + 普通快速启动模板
Json 文件
- app.json 和 config.json 是作用于项目的, page 里的 json 是针对页面的
project.config.json : 用来配置开发这个项目的个性化的配置, 包括平台的文字颜色, 代码上传方式之类的, 等你换电脑开发的时候就不用重新配置 - app.json
- page : String 类型; 必填;设置页面路径
demo code :
"pages":[
"pages/index/index", //数组的第一项代表小程序开启时候的第一个页面;
"pages/logs/logs", //页面是不加后缀的(such as : index.xml), 系统会对每个页面文件夹里的4个files进行整合
"pages/test/tracy"
],
在页面进行新增和删除的时候也要修改这里, 否则会报错。
我们有一个快捷的方法来添加页面 就是直接在这个 code 里新建一个路径 : such as "pages/test/addOnePage" 这样直接写 code 即可, 这样省去了手动添加文件夹和文件的过程, 写完点击 “编译” - window : Object; 设置页面窗口表现
Demo code:
"window":{
"backgroundColor":"#000000", //窗口背景颜色
"backgroundTextStyle":"light", //下拉背景字体了; loading 图的样式,仅支持 "light/dark"
"enablePullDownRefresh" : false, //是否开启下拉刷新
"navigationBarBackgroundColor": "#fff", //导航栏背景颜色, 默认白色
"navigationBarTitleText": "WeChat",
//导航标题栏文字内容 "navigationBarTextStyle":"black" //导航栏标题颜色, 仅支持 "white/black"
"onReachBottomDistance" : 50, // 页面"上拉触底事件" 触发时 距页面底部距离, 单位为 px; 它是和JS 文件中的函数 "onReachBottom" 绑定的, 这里可以写触底事件
} - 触底事件 demo:
onReachBottom:function()
{
console.log("控制台打印触底事件")
} - tabBar : Object; 设置底部 tab 的表现 demo (微信下方的 "发现", "我")
Demo code:
"tabBar": {
"color": "#a9b7b7", //文字颜色
"selectedColor": "#11cd6e", // 高亮颜色
"borderStyle": "black", //tabBar 上边框的颜色, 仅支持 "Black/White"
"position" : "bottom", //tabBar 的位置, 可选值 bottom/top
"list": // item 最多5个 最少2个[
{
"selectedIconPath
"images/icon_consult_press.png", //高亮icon,当 tabBar position 为 Top 的时候该值无效, 不支持网络图片
"iconPath":
"images/icon_consult.png", //默认icon, 当 tabBar position 为 Top 的时候该值无效, 不支持网络图片
"pagePath": "pages/index/index", // 页面路径
"text": "首页"
},
{
"selectedIconPath": "images/icon_invest_press.png",
"iconPath": "images/icon_invest.png",
"pagePath": "pages/logs/logs",
"text": "一元投"
},
{
"selectedIconPath": "images/icon_mine_press.png",
"iconPath": "images/icon_mine.png",
"pagePath": "pages/mine/mine",
"text": "我的"
}
]
} - networkTimeout : Object; 设置各种网络超时时间, 超过这个最大请求时间则不再请求
Demo code:
"networkTimeout": {
"request" : 20000,
"connectSocket" : 20000,
"downloadFile" : 20000,
"uploadFile": 20000,
} - debug : Boolean; 设置是否开启 debug 模式, 可以帮助开发者快速定位一些常见的问题
Demo code:
"debug" : true
- page : String 类型; 必填;设置页面路径
- page.json
- 我们在 page.json 设置的属性会覆盖 app.json 的属性, 因为page.json 只能设置和 Windows 一样的属性, 所以说就不能再次写 :"window":{ } 这样了, 直接写下面的属性就可以了
- "navigationBarBackgroundColor": "#fff", //导航栏背景颜色, 默认白色
- "navigationBarTextStyle":"black" //导航栏标题颜色, 仅支持 "white/black"
- "navigationBarTitleText": "WeChat",
//导航标题栏文字内容 - "blackgroundColor":"#fff", //窗口的背景颜色
- "enablePullDownRefresh" : false, //是否开启下拉刷新
- "onReachBottomDistance" : 50, // 页面"上拉触底事件" 触发时 距页面底部距离, 单位为 px
- 只有页面json才有的属性:
- "disableScroll" : false, //设置为 true, 则页面整体不能上下滚动
WXML 文件
- {{}} //数据绑定, 前端WXML 文件调用后台JS 变量, 达到视图层和逻辑层的通信
- 内容绑定
<view> {{message}} </view> //这里的 message 是 页面JS 文件里定义的变量 - 组件属性绑定
<view id="item-{{itemNumber}}"></view> - 控制属性绑定
<view wx:if="{{condition}}"></view> - 关键字绑定
<checkbox checked="{{false}}"></checkbox> - 绑定内进行运算
三元运算: <view hidden="{{flag?true:false}}"></view>
算术运算: <view> {{a+b}} + {{c}} + d </view>
逻辑运算: <view wf:if="{{length>5}}"></view>
字符串运算: <view>{{"Hello" + name}}</view>
数据路径运算: <view>{{object.key}}{{array[0]}}</view>
- 内容绑定
- 条件渲染 wx:if="{{condition}}" (不可以嵌套 view, 想嵌套用 block)
wx:elif 和 wx:else
Demo: 当 length 大于 5 页面渲染值为 1, 当length 大于2 页面渲染值为 2, 其他情况页面显示 3
<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length > 2}}">2</view>
<view wx:else>3</view>
Demo: 块级渲染 : 渲染多个 view
<block wx:if="{{condition}"> //block 不会渲染页面, 它只接受一个控制属性,只是一个容器
<view>1</view>
<view>2</view>
</block> - wx:for // 列表渲染
.wxml 文件
<view wx:for="{{array}}">
{{index}}:{{item.message}}
</view>
.js 文件
Page({
data:{
array:[{
message:'first',
},{
message:'second',
}]
}
})
wx:for-item 和 wx:for-index wx:for 是可以 view 嵌套的
Demo : 9*9 乘法表
<view wx:for="{{1,2,3,4,5,6,7,8,9}}" wx:for-itm="i">
<view wx:for="{{1,2,3,4,5,6,7,8,9}}" wx:for-itm="j">
<view wx:if="{{i <=j}}"> {{i}} *{{j}}={{i*j}} </view>
</view>
</view> - <template> //模板
定义模板 <template name="templateName">
<view>
<text>{{index}}:{{item.msg}}</text>
<text>Time : {{item.time}}</text>
<text>Name : {{item.name}}</text>
</view>
</template>
使用模板
<template is="templateName" data="{{...item}}" />
.js 文件
Page({
data:{
item:[{
msg:'first',
time:'2019-02-14',
name:'Tracy'
},{
msg:'second',
time:'2019-02-14',
name:'Tracy1'
}]
}
}) - 事件 事件名="方法名"
<view bindtap="viewtap">
事件名:以 bind 或者 catch 开头 + 事件类型 (such as : bindtap, catchtouchstart)
方法名: 对应的是 Js Page 中定义的同名函数
Tips: bind 不会阻止冒泡事件向上冒泡, catch 会阻止冒泡事件向上冒泡
WXML 有如下6个冒泡事件, 其余都是非冒泡事件 :
touchstart : 手指触摸动作开始
touchmove : 手指触摸后移动
touchcancel: 手指触摸动作被打断, 如来电提醒, 弹窗等
touchend : 手指触摸动作结束
tap: 手指触摸后马上离开
longtap: 手指触摸后, 超过350ms再离开 - 引用
import
被引用的文件定义了模板代码, 作用域仅限于当前引用
(即 a 引用了 B, B 引用了 c. 此时 a 不能直接引用 c 里的 template)
item.wxml 文件
<template name="item">
<view>{{text}}</view>
</template>
index.wxml 文件
<import src="item.wxml" />
<template is="item" data="{{text:'forbar'}}" />include
引入除了模块外的其他全部代码
header.wxml
<view>header</view>
footer.wxml
<view>footer</view>
index.wxml 文件
<include src="header.wxml" />
<view>body</view>
<include src="footer.wxml" />
js 文件
- App() 函数 -- app.js 全局js 文件
- 这三个函数都不是必须的
- onlauch : 小程序初始化后, 则会触发且只会触发一次
- onShow : 小程序启动, 或是从后台进入前台则被触发
- onHide: 小程序从前台切换到后台则被触发
- Page 函数 -- 页面 JS 文件
- 初始化数据 -- data: 属性
- 生命周期函数
onLoad : 页面加载完
onShow : 页面显示时
onReady: 页面初次渲染完成时
onHide : 页面隐藏时
onUnload : 页面卸载时
onPullDownRefresh: 下拉刷新时 - 事件处理函数
- setData : 可以多次调用该方法来更改数据. this.setData 中的 this 代表这个页面
之前没有出现过的数据, 也可以在这里直接使用, 不用需要在 data 里先定义好才能使用
WXSS 样式文件
- 新的尺寸单位 rpx, 所有手机的屏幕宽度为 750rpx,它会根据屏幕宽度进行自适应
- 样式导入: 可以写 style 也可以写css
@import"/common/common.wxss" 引用另一个文件定义的样式
小程序组件
- 共同属性 data-* : Any 类型属性, 当组件触发时间时,将该属性发送给时间处理函数
- 共同属性 band*/catch* : 事件也是组件的一种属性, EventHandler类型属性, 绑定该组件相关的事件处理函数
- 微信搜索 : 小程序示例, 这个小程序展示了目前小程序支持的组件
- import "../../app.wxss";
- .container { height: 100%; }
- full-width : 750rpx;
- layout-2-1
/*common css for page layout*/ page { background: #eee; } image { width: 100%; /*mode="widthFix" 高度自适应*/ } .qingti-column { width: 750rpx; /*1rpx=window.innerWidth/75*/ clear: both; } .qingti-column [class*=qingti-col-] { margin-bottom: 15rpx; } .qingti-column .qingti-col-1-1 { width: 710rpx; padding: 0rpx 20rpx; } .qingti-column .qingti-col-2-1 { width: 350rpx; padding: 0rpx; } .qingti-column .qingti-col-2-1:nth-child(odd) { padding-left: 20rpx; padding-right: 5rpx; float: left; } .qingti-column .qingti-col-2-1:nth-child(even) { padding-right: 20rpx; padding-left: 5rpx; float: right; } .qingti-column [class*=qingti-col-] { padding: 0rpx 20rpx; }