微信小程序
目录
环境准备
注册账号
获取APPID
开发工具
小程序结构目录
小程序文件结构和传统web对比
基本的项目目录
小程序配置文件
. 全局配置app.json
1. pages
2. window
3.tabbar
页面配置page.json
模板语法
数据绑定
普通写法
组件属性
bool类型
运算
列表渲染
条件渲染
wx:if
. hidden
小程序事件的绑定
样式 WXSS
尺寸单位
样式导入
选择器
小程序中使用less
常用组件
text
. image
swiper
. navigator
. rich-text
button
. icon
radio . checkbox
自定义组件
. 其他属性
组件-自定义组件传参
小程序生命周期
环境准备
注册账号
建议使用全新的邮箱，没有注册过其他小程序或者公众号的 访问注册⻚⾯，耐⼼完成注册即可
获取APPID
于后期调⽤微信⼩程序的接⼝等功能，需要索取开发者的⼩程序中的APPID ，所以在注册成功后， 可登录，然后获取APPID。登录 ，成功后可看到如下界⾯ 然后复制你的APPID,悄悄的保存起来，不要给别⼈看到?https://img-blog.csdnimg.cn/3ab7dd5feb944d54bfe3a315c1695ae7.png https://img-blog.csdnimg.cn/139dd7f33ce24761898cac0316efd66f.png
开发工具
下载地址
微信⼩程序⾃带开发者⼯具，集开发 预览 调试 发布于⼀⾝的 完整环境。 但是由于编码的体验不好，因此 建议使⽤ vs code + 微信小程序编辑工具 来实现编码 vs code 负责敲代码， 微信编辑工具 负责预览 小程序结构目录
⼩程序框架 的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验服务。⼩程序框架提供了⾃⼰的视图层描述语⾔WXML 和 WXSS 、，以及 JavaScript ，并在视图层与逻 辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。小程序文件结构和传统web对比
https://img-blog.csdnimg.cn/256b94cee6d64f90a7de153544746c25.png
通过以上对⽐得出，传统web 是三层结构。⽽微信⼩程序 是四层结构，多了⼀层 配置.json
基本的项目目录
https://img-blog.csdnimg.cn/52bd74a7679247178c28add0dd8398bd.png
小程序配置文件
一个小程序应会程序会包括最基本的两种配置文件。一种是全局的app.json 和 的 page.json 注意：配置文件中不能出现注释. 全局配置app.json
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底 部 tab 等。 普通快速启动项目里 边的app.json 配置https://img-blog.csdnimg.cn/9b2fadb4fcff40e798512f80b769f06e.png
字段的含义1. pages
字段用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序 页面定义在哪个目录。2. window
字段定义小程序所有页面的顶部背景颜色，文字颜色定义等。 3. 完整的配置信息请参考app.json配置 3.tabbar
https://img-blog.csdnimg.cn/784e84d978fb46eaaf4a600e857da8da.png
页面配置page.json
这里的page.json 其实是来表示页面录下的 page.json 这类和小程序页面相关的配置。 开发者可以独立定义每个页面的一些属性，如顶部颜色、是否允许下拉刷新等等。 页面的配置只能设置app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。 https://img-blog.csdnimg.cn/1f92f49abe7f480e81bfd5bad0e7fba1.png
模板语法
text==span
view==div
checkbox==复选框
block 渲染一个包含多节点的结构块 block最终不会变成真正的dom元素
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合 基础组件 、 事件系统 ，可以构 建页面的结构。数据绑定
普通写法
<view> {{ message }} </vie
Page({
data: {
message: 'Hello MINA!'
}
}) 列表渲染
wx:for
项的变量名默认为item wx:for - -item 可以指定数组当前元素的变量名 下标变量名默认为index wx:for - -index 可以指定数组当前下标的变量名 wx:key 、用来提高数组渲染的性能 保留字 *this ，它的意思是 item 本身 ，*this 代表的必须是 唯一的字符串和数组。 wx:key 绑定的值 有如下选择 1.string 类型，表示 循环项中的唯一属性 <view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
}) 条件渲染
wx:if 移除标签
频繁切换 hidden 不常使用 wx:if 添加样式 wx:if
在框架中，使用wx:if="{{condition}}" 来判断是否需要渲染该代码块： <checkbox checked="{{false}}"> </checkbox> . hidden
三元运算
<view hidden="{{flag ? true : false}}"> Hidden </view>
算数运算
<view> {{a + b}} + {{c}} + d </view>
逻辑判断
<view wx:if="{{length > 5}}"> </view>
字符串运算
view>{{"hello" + name}}</view>
Page({
data:{
name: 'MINA'
a: 1,
b: 2,
c: 3
}
}) 小程序事件的绑定
小程序中绑定事件，通过bind关键字来实现。如 bindtap bindinput bindchange 等 不同的组件支持不同的事件，具体看组件的说明即可。 list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
wx:key="id"
list:
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'
}]
}
}) 绑定事件时不能带参数 不能带括号、 事件传值 通过标签自定义属性的方式 和 value <view wx:if="{{false}}">1</view>
<view wx:elif="{{true}}">2</view>
<view wx:else>3</view> 样式 WXSS
WXSS( WeiXin Style Sheets )是一套样式语言，用于描述 WXML 的组件样式。 与 CSS 相于， WXSS 扩展的特性有： 响应式长度单位 rpx 样式导入 尺寸单位
rpx （responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx 。如在 iPhone6 上，屏幕宽度为 375px ，共有750个物理像素，则 750rpx = 375px = 750物理1rpx = 0.5px = 1物理像素 https://img-blog.csdnimg.cn/dbd9fd5ab8bb47bc8ce2e4c81827caca.png 设计稿750 750px=750rpx 1px=1rpx 375设计稿 375px=750rpx 1px=2rpx 1rpx=0.5rpx 未知 100px=750rpx*元素大小/page(设计稿大小) calc属性可以计算 建议： 开发微信⼩程序时设计师可以⽤ iPhone6 作为视觉稿的标准。
使用步骤：
1. 确定设计稿宽度 pageWidth 2. 计算比例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth 3. 在less⽂件中，只要把设计稿中的 px => 750/pageWidth rpx 即可。 样式导入
wxss中直接就支持，样式导入功能。 也可以和 less中的导入混用。 使用 @import 语句可以导入外联样式表，只支持 相对路径 。 选择器
特别需要注意的是 小程序 不支持通配符 * 因此以下代码无效！ https://img-blog.csdnimg.cn/57fcac7372d94c7f995ab8d5aac625c0.png 小程序中使用less
原生小程序不支持 less ，其他基于小程序的框架大体都支持，如 wepy ， mpvue ， taro 等。 但是仅仅因为一个less功能，就去引人一个框架，肯定是不可取的。因此可以用以下形式来实现 1. 编辑器是 vscode 2. 安装插件 easy less 3. 在vs code的设置中加⼊如下，配置 <view hidden="{{condition}}"> True </view> 4. 在要编写样式的地方，新建 less 文件，如 index.less ,然后正常编辑即可 常用组件
view 代替 原来的 div 标签
text
1. 文本标签 2. 只能嵌套text 3. 长按文字可以复制（只有该标签有这个功能） 4. 可以对空格 回车 进形编码 https://img-blog.csdnimg.cn/25edcb62415e4ec198f9d03a3559b2a2.png . image
1. 图片标签，image组件默认宽度320px、高度240px 2. 支持懒加载 https://img-blog.csdnimg.cn/80cb47e0b91b4e1da162c6109d35a8c2.png
mode 有效值： mode 有 13 种模式，其中 4 种是缩放模式，9种是裁剪模式。 https://img-blog.csdnimg.cn/a8adc21f9a0e43f6aec317de215e813b.png swiper
微信内置轮播图组件 swiper-item 滑块 默认宽度和⾼度都是100%
https://img-blog.csdnimg.cn/2d5b798d9b3c41fea587a72ed9c36df2.png
. navigator
导航组件 类似超链接标签
https://img-blog.csdnimg.cn/9b5d89c41f7c4d2ca6555fedf2985ec7.png
https://img-blog.csdnimg.cn/79476c769cd942b88921b463028f94cb.png
. rich-text
富文本标签
可以将字符串解析成 对应标签，类似 vue中 v-html 功能 <input bindinput="handleInput" />
Page({
// 绑定的事件
handleInput: function(e) {
console.log(e);
console.log("值被改变了");
this.setData({
num:e.detail.value
})
}
}) nodes属性 nodes 属性⽀持 字符串 和 标签节点数组 https://img-blog.csdnimg.cn/c6ac24d0a1b742ee88c56b001db244ba.png
[*]nodes 不推荐使⽤ String 类型，性能会有所下降。
[*]rich-text 组件内屏蔽所有节点的事件。
[*]attrs 属性不值持 id ，支持 class 。 name 属性大小写不敏感。
[*]如果使用了不受信任的 HTML 节点，该节点及其所有⼦节点将会被移除。
[*]img 标签仅持缩络图⽚。
button
https://img-blog.csdnimg.cn/6d025aa99a284109873427e40b42935c.png
https://img-blog.csdnimg.cn/1b9e3a9aa4d04befbc5aa5292dff31cd.png
open-type https://img-blog.csdnimg.cn/f7f1292ed021475fb35b186f6b0662db.png
. icon
https://img-blog.csdnimg.cn/c9858c17ec5c4f97b5102e33ea669d25.png
<input bindinput="handleInput" data-item="100" />
. 事件触发时获取数据
handleInput: function(e) {
// {item:100}
console.log(e.currentTarget.dataset)
// 输入框的值
console.log(e.detail.value);
} radio . checkbox
https://img-blog.csdnimg.cn/abf3ad953f15441eb80865918c636dfc.pnghttps://img-blog.csdnimg.cn/158827c8d5b149c9b3aff11d119ecec6.png
自定义组件
小程序允许我们使自定义组件的方式来构建页面
创建自定义组件
声明组件 首先需要在组件的 json 组件中进行自定义组件声明 myHeader.json "component": true }
编辑组件 同时，还要在组件的 wxml 组件中编写组件模板，在 wxss 组件中加组组件样式 slot 表示插槽，类似vue中的slot
"less.compile": {
"outExt": ".wxss"
} 注册组件 在组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和 自定义方法 // 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 World!'
}]
}]
},
tap() {
console.log('tap')
}
}) 声明引入自定义组件 首先要在页面的 json 文件中进行引入声明。还要提供对应的组件名和组件路径 Page({
data: {
iconSize: ,
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> 字面中使用定义组件 <view class="inner">
{{innerText}}
<slot></slot>
</view> . 其他属性
定义段与⽰例⽅法
Component 构造器可⽤于定义组件，调⽤ Component 构造器时可以指定组件的属性、数据、⽅法 https://img-blog.csdnimg.cn/bd7ee259cc7e4e72b43ae79af727a28d.png
组件-自定义组件传参
1. 父组件通过 属性 的行式给子组件传递参数 2. 子组件通过 事件 的 行式向父组件传递参 过程 1. 父 组件 把数据 {{tabs}} 传递到 子组件的 tabItems 属性中 2. 父 组件 监听 onMyTab 事件 3. 子 组件 触发 bindmytap 中的 mytap 事件 1. 自定义组件触发事件时，需要使用 triggerEvent 方法，指定 事件名 、 detail 对象 4. 父 -> 子动态传值 this.selectComponent("#tabs") ; 1. 标签名 是 中划线的⽅式 2. 属性的行式 也是要中划线的⽅式 3. 其他情况可以使用驼峰命名 1. 组件的文件名如 myHeader.js 的等 2. 组件内的要接收的属性名 如 innerText 小程序生命周期
https://img-blog.csdnimg.cn/66d0b6c1a9ce4f358697733c9a6a6d2c.png
https://img-blog.csdnimg.cn/2b26fe1170044ca0ab071dbdceba7bca.png
https://img-blog.csdnimg.cn/fc7aa4264fe049218bc4d7164298076a.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]