黑马程序员-微信小程序基础文档和源码

• 1. 微信小程序介绍
  • 1.1. 为什么是微信小程序 ？
  • 1.2. 微信小程序历史
  • 1.3. 疯狂的微信小程序
  • 1.4. 还有其他的小程序 不容忽视
  • 1.5. 体验
    • 1.5.1. 官方微信小程序体验
    • 1.5.2. 其他优秀的第三方小程序
• 2. 环境准备
  • 2.1. 注册账号
  • 2.2. 获取APPID
  • 2.3. 开发工具
• 3. 第一个微信小程序
  • 3.1. 打开微信开发者工具
  • 3.2. 新建小程序项目
  • 3.3. 填写项目信息
  • 3.4. 成功
• 4. 微信开发者工具介绍
• 5. 小程序结构目录
  • 5.1. 小程序文件结构和传统web对比
  • 5.2. 基本的项目目录
• 6. 小程序配置文件
  • 6.1. 全局配置 app.json
    • 6.1.1. tabbar
  • 6.2. 页面配置 page.json
  • 6.3. sitemap 配置-了解即可
• 7. 模板语法
  • 7.1. 数据绑定
    • 7.1.1. 普通写法
    • 7.1.2. 组件属性
    • 7.1.3. bool类型
  • 7.2. 运算
    • 7.2.1. 三元运算
    • 7.2.2. 算数运算
    • 7.2.3. 逻辑判断
    • 7.2.4. 字符串运算
    • 7.2.5. 注意
  • 7.3. 列表渲染
    • 7.3.1. wx:for
    • 7.3.2. block
  • 7.4. 条件渲染
    • 7.4.1. wx:if
    • 7.4.2. hidden
• 8. 小程序事件的绑定
  • 8.1. wxml
  • 8.2. page
  • 8.3. 特别注意
• 9. 样式 WXSS
  • 9.1. 尺寸单位
  • 9.2. 样式导入
  • 9.3. 选择器
  • 9.4. 小程序中使用less
• 10. 常见组件
  • 10.1. view
  • 10.2. text
    • 10.2.1. 代码
  • 10.3. image
  • 10.4. swiper
    • 10.4.1. swiper
    • 10.4.2. swiper-item
  • 10.5. navigator
  • 10.6. rich-text
    • 10.6.1. nodes属性
  • 10.7. button
    • open-type 的 contact的实现流程
  • 10.8. icon
  • 10.9. radio
  • 10.10. checkbox
• 11. 自定义组件
  • 11.1. 创建自定义组件
    • 11.1.1. 声明组件
    • 11.1.2. 编辑组件
    • 11.1.3. 注册组件
  • 11.2. 声明引入自定义组件
  • 11.3. 页面中使用自定义组件
  • 11.4. 其他属性
  • 11.5. 定义段与示例方法
  • 11.6. 组件-自定义组件传参
    • 11.6.1. 过程
  • 11.7. 小结
• 12. 小程序生命周期
  • 12.1. 应用生命周期
  • 12.2. 页面生命周期
  • 12.3. 页面生命周期图解

传智播客-黑马程序员

Mini Program

Mini Program

传智播客-黑马程序员

建议使用全新的邮箱，没有注册过其他小程序或者公众号的。

传智播客-黑马程序员

APPID

APPID

????

传智播客-黑马程序员

传智播客-黑马程序员

vs code

vs code

微信小程序编辑工具

微信小程序编辑工具

vs code

vs code

微信编辑工具

微信编辑工具

传智播客-黑马程序员

传智播客-黑马程序员

传智播客-黑马程序员

WXML

WXML

WXSS

WXSS

JavaScript

JavaScript

传智播客-黑马程序员

app.json

app.json

page.json

page.json

注意：配置文件中不能出现注释

app.json

app.json

app.json

app.json

传智播客-黑马程序员

pages

pages

window

window

page.json

page.json

page.json

page.json

app.json

app.json

window

window

app.json

app.json

window

window

{

"pages":[

 "pages/index/index",

 "pages/logs/logs"

],

"window":{

 "backgroundTextStyle":"light",

 "navigationBarBackgroundColor": "#fff",

 "navigationBarTitleText": "WeChat",

 "navigationBarTextStyle":"black"

}

}

传智播客-黑马程序员

#000000

#000000

black

black

white

white

dark

dark

light

light

true

true

app.json

app.json

sitemap.json

sitemap.json

<view> {{ message }} </view>

Page({

data: {

 message: 'Hello MINA!'

}

})

<view id="item-{{id}}"> </view>

Page({

data: {

 id: 0

}

})

<checkbox checked="{{false}}"> </checkbox>

传智播客-黑马程序员

item

item

wx:for

wx:for

item

item

index

index

wx:for

wx:for

index

index

wx:key

wx:key

wx:key

wx:key

string

string

<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'

}

})

传智播客-黑马程序员

*this

*this

item

item

wx:if="{{condition}}"

wx:if="{{condition}}"

wx:if

wx:if

hidden

hidden

list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]

wx:key="id"

list:[1,2,3,4,5]

wx:key="*this"

<view wx:for="{{array}}" wx:key="id">

{{index}}: {{item.message}}

</view>

Page({

data: {

 array: [{

  id:0,

  message: 'foo',

 }, {

  id:1,

  message: 'bar'

 }]

}

})

<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >

<view> {{index}}: </view>

<view> {{item}} </view>

</block>

<view wx:if="{{false}}">1</view>

<view wx:elif="{{true}}">2</view>

<view wx:else>3</view>

<view hidden="{{condition}}"> True </view>

传智播客-黑马程序员

wx:if

wx:if

bindtap

bindtap

bindinput

bindinput

bindchange

bindchange

value

value

WeiXin Style Sheets

WeiXin Style Sheets

WXML

WXML

rpx

rpx

<input bindinput="handleInput" />

Page({

// 绑定的事件

handleInput: function(e) {

 console.log(e);

 console.log("值被改变了");

}

})

<input bindinput="handleInput(100)" />

<input bindinput="handleInput" data-item="100" />

handleInput: function(e) {

 // {item:100}

 console.log(e.currentTarget.dataset)

  

 // 输入框的值

 console.log(e.detail.value);

}

传智播客-黑马程序员

rpx

rpx

750rpx

750rpx

iPhone6

iPhone6

375px

375px

750rpx = 375px = 750物理像

750rpx = 375px = 750物理像

素

素

1rpx = 0.5px = 1物理像素

1rpx = 0.5px = 1物理像素

750rpx = pageWidth px

750rpx = pageWidth px

1px=750rpx/pageWidth

1px=750rpx/pageWidth

px

px

750/pageWidth rpx

750/pageWidth rpx

@import

@import

*

*

/** common.wxss **/

.small-p {

padding:5px;

}

/** app.wxss **/

@import "common.wxss";

.middle-p {

padding:15px;

}

*{

 margin:0;

 padding:0;

 box-sizing:border-box;

}

传智播客-黑马程序员

.intro

.intro

#firstname

#firstname

view

view

view,

view,

checkbox

checkbox

view::after

view::after

view::before

view::before

less

less

wepy

wepy

mpvue

mpvue

taro

taro

vscode

vscode

easy less

easy less

less

less

index.less

index.less

view,text,rich

view,text,rich

text,button,image,navigator,icon,swiper,radio,checkbox。

text,button,image,navigator,icon,swiper,radio,checkbox。

div

div

 "less.compile": {

   "outExt":    ".wxss"

 }

<view hover-class="h-class">

点击我试试

</view>

传智播客-黑马程序员

<text selectable="{{false}}" decode="{{false}}">

 普&nbsp;通

</text>

传智播客-黑马程序员

微信内置轮播图组件

传智播客-黑马程序员

传智播客-黑马程序员

滑块

导航组件 类似超链接标签

富文本标签

v

v

html

html

传智播客-黑马程序员

// 1  index.wxml 加载 节点数组

<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>

// 2 加载 字符串

<rich-text nodes='<img

src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p

ng" alt="">'></rich-text>

 

// index.js

 

Page({

data: {

 nodes: [{

  name: 'div',

  attrs: {

   class: 'div_class',

   style: 'line-height: 60px; color: red;'

  },

  children: [{

   type: 'text',

   text: 'Hello&nbsp;World!'

  }]

 }]

},

tap() {

 console.log('tap')

}

})

传智播客-黑马程序员

nodes

nodes

字符串

字符串

标签节点数组

标签节点数组

nodes

nodes

String

String

rich

rich

text

text

attrs

attrs

name

name

HTML

HTML

img

img

<button

type="default"

size="{{defaultSize}}"

loading="{{loading}}"

plain="{{plain}}"

>

default

</button>

传智播客-黑马程序员

传智播客-黑马程序员

appid

appid

appid

appid

客服

客服

微信

微信

传智播客-黑马程序员

Page({

data: {

 iconSize: [20, 30, 40, 50, 60, 70],

 iconType: [

  'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',

'download', 'search', 'clear'

 ],

 iconColor: [

  'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'

 ],

}

})

<view class="group">

<block wx:for="{{iconSize}}">

 <icon type="success" size="{{item}}"/>

</block>

</view>

<view class="group">

<block wx:for="{{iconType}}">

 <icon type="{{item}}" size="40"/>

</block>

</view>

<view class="group">

<block wx:for="{{iconColor}}">

 <icon type="success" size="40" color="{{item}}"/>

</block>

</view>

传智播客-黑马程序员

可以通过 color属性来修改颜色

可以通过 color属性来修改颜色

类似vue或者react中的自定义组件

类似于页面，一个自定义组件由

json

json

wxml

wxml

wxss

wxss

js

js 4个文件组成

components/myHeader

components/myHeader

myHeader

myHeader

传智播客-黑马程序员

json

json

myHeader.json

myHeader.json

wxml

wxml

wxss

wxss

slot

slot

myHeader.wxml

myHeader.wxml

wxss

wxss

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

myHeader.wxss

myHeader.wxss

js

js

Component()

Component()

myHeader.js

myHeader.js

{

"component": true

}

<!-- 这是自定义组件的内部WXML结构 -->

<view class="inner">

{{innerText}}

 <slot></slot>

</view>

/* 这里的样式只应用于这个自定义组件 */

.inner {

color: red;

}

Component({

properties: {

 // 这里定义了innerText属性，属性值可以在组件使用时指定

 innerText: {

  // 期望要的数据是 string类型

  type: String,

传智播客-黑马程序员

json

json

index.wxml

index.wxml

Component

Component

Component

Component

  value: 'default value',

 }

},

data: {

 // 这里是一些组件内部数据

 someData: {}

},

methods: {

 // 这里是一个自定义方法

 customMethod: function(){}

}

})

{

// 引用声明

"usingComponents": {

// 要使用的组件的名称   // 组件的路径

 "my-header":"/components/myHeader/myHeader"

}

}

<view>

<!-- 以下是对一个自定义组件的引用 -->

<my-header inner-text="Some text">

 <view>用来替代slot的</view>

 </my-header>

</view>

传智播客-黑马程序员

properties

properties

setData

setData

{{tabs}}

{{tabs}}

tabItems

tabItems

onMyTab

onMyTab

bindmytap

bindmytap

mytap

mytap

triggerEvent

triggerEvent

事件名

事件名

detail

detail

传智播客-黑马程序员

this.selectComponent("#tabs")

this.selectComponent("#tabs")

// page.wxml

<tabs tabItems="{{tabs}}" bindmytap="onMyTab" >

内容-这里可以放插槽

</tabs>

// page.js

data: {

 tabs:[

  {name:"体验问题"},

  {name:"商品、商家投诉"}

 ]

},

onMyTab(e){

 console.log(e.detail);

},

// com.wxml

<view class="tabs">

<view class="tab_title" >

 <block wx:for="{{tabItems}}" wx:key="{{item}}">

  <view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view>

 </block>

</view>

<view class="tab_content">

 <slot></slot>

</view>

</view>

// com.js

Component({

properties: {

 tabItems:{

  type:Array,

  value:[]

 }

},

/**

 * 组件的初始数据

 */

data: {

},

/**

 * 组件的方法列表

 */

methods: {

 handleItemActive(e){

  this.triggerEvent('mytap','haha');

 }

}

})

传智播客-黑马程序员

myHeader.js

myHeader.js

innerText

innerText

关于小程序前后台的定义和小程序的运行机制，请参考运行机制章节。

传智播客-黑马程序员