目录
环境准备
注册账号
建议使用全新的邮箱,没有注册过其他小程序或者公众号的 访问注册⻚⾯,耐⼼完成注册即可
获取APPID
于后期调⽤微信⼩程序的接⼝等功能,需要索取开发者的⼩程序中的
APPID ,所以在注册成功后, 可登录,然后获取APPID。
登录
,成功后可看到如下界⾯ 然后复制你的APPID,悄悄的保存起来,不要给别⼈看到?
开发工具
下载地址
微信⼩程序⾃带开发者⼯具,集
开发 预览 调试 发布
于⼀⾝的 完整环境。 但是由于编码的体验不好,因此 建议使⽤ vs code + 微信小程序编辑工具 来实现编码 vs code 负责敲代码, 微信编辑工具 负责预览
小程序结构目录
⼩程序框架
的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验服务。
⼩程序框架提供了⾃⼰的视图层描述语⾔
WXML 和 WXSS 、,以及 JavaScript ,并在视图层与逻
辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。
小程序文件结构和传统web对比
通过以上对⽐得出,传统web 是三层结构。⽽微信⼩程序 是四层结构,多了⼀层 配置.json
基本的项目目录
小程序配置文件
. 全局配置app.json
字段的含义
1. pages
2. window
3. 完整的配置信息请参考
app.json配置
3.tabbar
页面配置page.json
模板语法
text==span
view==div
checkBox==复选框
block
渲染一个包含多节点的结构块 block最终不会变成真正的dom元素
数据绑定
普通写法
<view> {{ message }} </vie
Page({
data: {
message: 'Hello MINA!'
}
})
组件属性
<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})
bool类型
不要直接写 checked=false,其计算结果是是个字符串,字符串和花括号之间不要存在空格
<checkBox checked="{{false}}"> </checkBox>
运算
表达式指的是一些简单的运算 数学加减,字符串拼接 三元运算
语句 if eles switch do whlie for
注意
花括号和引号之间如果有空格,将最终被解析成为字符串
三元运算
<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
}
})
列表渲染
wx:for
wx:key 、用来提高数组渲染的性能
保留字
*this ,它的意思是 item 本身 ,*this 代表的必须是 唯一的字符串和数组。
wx:key 绑定的值 有如下选择
1.
string 类型,表示 循环项中的唯一属性
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'
}]
}
})
条件渲染
wx:if 移除标签
频繁切换 hidden 不常使用
wx:if 添加样式
wx:if
在框架中,使用
wx:if="{{condition}}" 来判断是否需要渲染该代码块:
<view wx:if="{{false}}">1</view>
<view wx:elif="{{true}}">2</view>
<view wx:else>3</view>
. hidden
<view hidden="{{condition}}"> True </view>
小程序事件的绑定
<input bindinput="handleInput" />
Page({
// 绑定的事件
handleInput: function(e) {
console.log(e);
console.log("值被改变了");
this.setData({
num:e.detail.value
})
}
})
绑定事件时不能带参数 不能带括号、
<input bindinput="handleInput" data-item="100" />
. 事件触发时获取数据
handleInput: function(e) {
// {item:100}
console.log(e.currentTarget.dataset)
// 输入框的值
console.log(e.detail.value);
}
样式 WXSS
WXSS(
WeiXin Style Sheets )是一套样式语言,用于描述 WXML 的组件样式。
与
CSS
相于,
WXSS
扩展的特性有: 响应式长度单位 rpx 样式导入
尺寸单位
rpx (responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx 。如在 iPhone6
上,屏幕宽度为
375px ,共有750个物理像素,则 750rpx = 375px = 750物理1rpx = 0.5px = 1物理像素
设计稿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 即可。
样式导入
选择器
小程序中使用less
1. 编辑器是
vscode
2. 安装插件
easy less
3. 在vs code的设置中加⼊如下,配置
"less.compile": {
"outExt": ".wxss"
}
4. 在要编写样式的地方,新建
less 文件,如 index.less,然后正常编辑即可
常用组件
view 代替 原来的 div 标签
text
1. 文本标签
2. 只能嵌套text
4. 可以对空格 回车 进形编码
. image
2. 支持懒加载
mode 有效值:
mode 有 13 种模式,其中 4 种是缩放模式,9种是裁剪模式。
swiper
微信内置轮播图组件 swiper-item 滑块 默认宽度和⾼度都是100%
. navigator
. rich-text
富文本标签
// 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')
}
})
- nodes 不推荐使⽤ String 类型,性能会有所下降。
- rich-text 组件内屏蔽所有节点的事件。
- attrs 属性不值持 id ,支持 class 。 name 属性大小写不敏感。
- 如果使用了不受信任的 HTML 节点,该节点及其所有⼦节点将会被移除。
- img 标签仅持缩络图⽚。
button
open-type
. icon
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>
radio . checkBox
自定义组件
创建自定义组件
声明组件 首先需要在组件的 json 组件中进行自定义组件声明 myHeader.json "component": true }
编辑组件 同时,还要在组件的 wxml 组件中编写组件模板,在 wxss 组件中加组组件样式 slot 表示插槽,类似vue中的slot
<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
{{innerText}}
<slot></slot>
</view>
注册组件
Component({
properties: {
// 这里定义了innerText属性,属性值可以在组件使用时指定
innerText: {
// 期望要的数据是 string类型
type: String, value: 'default value', }
}, data: {
// 这里是一些组件内部数据
someData: {}
}, methods: {
// 这里是一个自定义方法
customMethod: function(){}
}
})
声明引入自定义组件
{
// 引用声明
"usingComponents": {
// 要使用的组件的名称 // 组件的路径
"my-header":"/components/myHeader/myHeader"
}
}
字面中使用定义组件
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。