创建项目
微信开发工具深入介绍
https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
基本项目目录
1. 配置介绍
一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json
和 页面自己的 page.json
注意:配置文件中不能出现注释
1.1. 全局配置app.json
app.json
是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。普通快速启动项目里边的 app.json
配置
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
字段的含义
-
pages
字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。 -
window
字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等。 - 完整的配置信息请参考 https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
page.json
这里的 page.json
其实用来表示页面目录下的 page.json
这类和小程序页面相关的配置。
开发者可以独立定义每个页面的一些属性,如顶部颜色、是否允许下拉刷新等等。
页面的配置只能设置 app.json
中部分 window
配置项的内容,页面中配置项会覆盖 app.json
的 window
中相同的配置项。
视图层
WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
数据绑定
普通写法
<view> {{ message }} </view>
Page({
data: {
message: 'Hello MINA!'
}
})
组件属性
简直和上面没区别啊
<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})
bool类型
不要直接写 checked=”false”,其计算结果是一个字符串
<checkbox checked="{{false}}"> </checkbox>
运算
三元运算
<view hidden="{{flag ? true : false}}"> Hidden </view>
算数运算
<view> {{a + b}} + {{c}} + d </view>
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
逻辑判断
<view wx:if="{{length > 5}}"> </view>
字符串运算
<view>{{"hello" + name}}</view>
Page({
data:{
name: 'MINA'
}
})
注意 花括号和引号之间如果有空格,将最终被解析成为字符串
列表渲染
wx:for
项的变量名默认为 item
wx:for-item
可以指定数组当前元素的变量名
下标变量名默认为 index
wx:for-index
可以指定数组当前下标的变量名 index是索引
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
渲染一个包含多节点的结构块 block最终不会变成真正的dom元素
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
<view wx:for="{{array}}" wx:for-item="val" wx:for-index="key" wx:key="jiakuai">
<view>{{index +"索引 val是值" + key}}: {{val.message}}</view>
<view>{{index +"索引" + key}}: {{val.id}}</view>
</view>
array:[{
"id": 1,"message":"jllklk"},{ "id":2,
"message":"klj"}]
wx:key
提高效率使用的
事件
<button bindtap="click">按钮</button>
<button bindlongtap="longclick">长按按钮</button>
// click:function(e){
// console.log('lllll')
// console.log(e)
// },
// longclick:function(){
// console.log('长按时间')
// // timeStamp: 4798 进入页面知道点击所经历的时间
// },
传值按钮
<button bindtap="clic" data-val="这是值" data-key="周四">传值按钮</button>
clic: function (e) { console.log(e.target.dataset)
},
条件渲染
wx:if
在框架中,使用 wx:if="{{condition}}"
来判断是否需要渲染该代码块:
<view wx:if="{{condition}}"> True </view>
hidden
<view hidden="{{condition}}"> True </view>
类似 wx:if
频繁切换 用 hidden
不常使用 用 wx:if
wxss样式文件
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
与 CSS 相比,WXSS 扩展的特性有:
-
尺寸单位
-
样式导入
尺寸单位
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。
样式导入
使用@import
语句可以导入外联样式表,@import
后跟需要导入的外联样式表的相对路径,用;
表示语句结束。
示例代码:
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
<view id="yy" class="oo">将老空间来记录</view>
#yy{
width: 100rpx;
height: 80rpx;
background-color: red
}
.oo{
width: 100rpx;
height: 800rpx;
background-color: yellow
}
内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
- style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
<view style="color:{{color}};" />
- class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上
.
,样式类名之间用空格分隔。<view class="normal_view" />
选择器
全局样式与局部样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
基本组件
小程序提供了常用的标签组件用于构建页面
view 类似 div
代码
<view hover-class="h-class">
点击我试试
</view>
<!-- wxss -->
.h-class{
background-color: yellow;
}
text
显示普通的文本 text只能嵌套text
代码
<text selectable="{{false}}" decode="{{false}}">
普 通
</text>
image
图片标签,image组件默认宽度320px、高度240px
注意:该标签 其实是 web中的 图片标签 和 背景图片的结合!!! 并且不支持以前的web中的背景图片的写法!!!
mode 有效值
mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。
swiper
微信内置有轮播图组件
默认宽度 100% 高度 150px
swiper
滑块视图容器。
swiper-item
滑块
默认宽度和高度都是100%
video
视频。该组件是原生组件,使用时请注意相关限制
<video src="{{src}}" controls></video>
自定义组件
小程序允许我们使用自定义组件的方式来构建页面。
自定义组件 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
创建自定义组件
类似于页面,一个自定义组件由 json
wxml
wxss
js
4个文件组成
声明组件
首先需要在 json
文件中进行自定义组件声明
{
"component": true
}
<view>{{title}}{{name}}</view>
<!-- 组件自定义变量写在my-com.js中组件的属性列表中 -->
<view bindtap="click">自定义组件的点击事件</view>
<!-- 事件不能直接写在。js里面 yao写在js里面的method里面 -->
编辑组件
同时,还要在 wxml
文件中编写组件模板,在 wxss
文件中加入组件样式
注意:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器
<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
{{innerText}}
<slot></slot>
</view>
/* 这里的样式只应用于这个自定义组件 */
.inner {
color: red;
}
注册组件
在自定义组件的 js
文件中,需要使用 Component()
来注册组件,并提供组件的属性定义、内部数据和自定义方法
Component({
properties: {
// 这里定义了innerText属性,属性值可以在组件使用时指定
innerText: {
type: String,
value: 'default value',
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod: function(){}
}
})
使用自定义组件
首先要在页面的 json
文件中进行引用声明。还要提供对应的组件名和组件路径
{
// 引用声明
"usingComponents": {
// 要使用的组件的名称 // 组件的路径
"component-tag-name": "path/to/the/custom/component"
}
}
页面向自定义组件传递数据
#页面中wxml
<my-con title="{{变量名}}"><my-con/>
#再组件中
properties: {
title:{
type:String,
value:"你好"
}
}
组件向页面传值(组件视图)
<view>{{title}}{{name}}</view>
<!-- 组件自定义变量写在my-com.js中组件的属性列表中 -->
<view bindtap="click">自定义组件的点击事件</view>
<!-- 事件不能直接写在。js里面 yao写在js里面的method里面 -->
主要看data
页面中
<my-com title="555"></my-com>
踩的坑
<!-- 自定义组件中的变量随时变换在导入的地方 直接写title=变量 -->
<my-com title="{{ll}}"></my-com>
<!-- 在自定义组件中自定义一个变量 在引用的地方可以直接传送过来 -->
<!-- 如果自定义组件的变量注释掉就不会显示了在饮用的地方 -->
组件将事件传给页面
页面
<my-com title="{{title}}" bind:icre="icre"></my-com>
页面中js
icre:function(e){
console.log(e)
this.setData({
num:this.data.num+1
})
},
组件中的wxml
<button bindtap='clickpush'>加我</button>
组件中的js
clickpush:function(e){
console.log(e)
this.triggerEvent("icre",{"index":13},{})
}
示例二
组件页面
<view bindtap="click">自定义组件的点击事件</view>
<!-- 事件不能直接写在。js里面 yao写在js里面的method里面 -->
组件。js文件
/**
* 组件的方法列表
*/
methods: {
click:function(){
console.log('lljljl')
this.triggerEvent("icre", {"a":123}, {})
// 自定义组件触发事件时 需要使用这个方法 指定事件名 detail对象和时间选项
// ice是个事件 第二个是传参数
}
}
})
使用组件的页面中
<text>{{sum}}</text>
<!-- sum初始值为零 -->
<my-com title="{{ll}}" bind:icre="click"></my-com>
<!-- 绑定事件是bind不要加tap -->
使用组件页面的js文件中
click:function(e){
// console.log("****")
console.log(e.detail.a)
var _this = this
var sum = this.data.sum
_this.setData({
sum: sum+1
})
}
// 没接收e之前 可以点击sum参数增加
// 自定义绑定组件传值在抛出页面那个方法第二个参数里传值,获取从e.datail中获取注意是一个对象需要继续点击key
使用组件页面的js文件中
data:{
ll:"随时变话的自定义组件的值",
sum:0
}