一、环境搭建
1.1 appid
1.2 deepin下安装exe
Linux Deepin 15.11 下安装运行任意 exe 程序1.3 ufw
二、基础语法
2.1 数据绑定
<view data-num="{
{num}}">自定义属性</view>
<checkbox checked='{
{IsChecked}}'></checkbox>
2.2 循环
- 循环对象时，属性是index，item是值
*this表示循环项
wx:key="*this"
- 示例
通常情况下可以省略: wx:for-item=“item” wx:for-index=“index”
<view wx:for="{
{Person}}" wx:for-item="item" wx:for-index="index" wx:key="*this">
索引:{
{
index}}
属性:{
{
item}}
</view>
2.3 block
- 占位标签
<block wx:for="{
{Person}}" wx:for-item="item" wx:for-index="index" wx:key="*this">
索引:{
{
index}}
属性:{
{
item}}
</block>
- 显示结果
2.4 hidden和wx:if区别
- hidden
<view hidden>隐藏</view>
- hidden是改变行内样式，display:none,如果有其他display样式，则会覆盖
hidden是添加样式的方式进行隐藏，wx:if是直接删除标签，消耗性能比较大。
2.5 wx:if
<view wx:if="{
{true}}">显示</view>
<view wx:if="{
{false}}">隐藏</view>
2.6 wx:elif和wx:else
<view wx:if="{
{false}}">显示</view>
<view wx:elif="{
{false}}">隐藏</view>
<view wx:else="{
{false}}">else</view>
三、事件
3.1 赋值this.setData()
<input bindinput="getnum"></input>
<text>{
{
num}}</text>
Page({
data: {
num: 9
},
getnum (e) {
this.setData({
num: e.detail.value
})
console.log(this.data.num)
}
});
3.2 事件中传参数
需要通过自定义属性传参数
<!--pages/Home/Home.wxml-->
<input bindinput="getnum"></input>
<text>{
{num}}</text>
<button data-num="{
{1}}" bindtap="reduce">+</button>
<button data-num="{
{-1}}" bindtap="reduce">-</button>
//Page Object
Page({
data: {
num: 9
},
reduce (e) {
console.log('haha')
console.log(e)
this.setData({
num: this.data.num += e.currentTarget.dataset.num
})
console.log(this.data.num)
}
});
四、样式
4.1 rpx
相对长度，默认是在750px中进行换算。
4.2 样式倒入
@import "相对路径";
五、vscode中安装的插件
5.1 easy less
* 书写.less文件会生成对应的wxss文件，less可以定义属性变量。
5.2 小程序开发助手
六、常见组件
6.1 view
view就是div
扫描二维码关注公众号，回复：
13464700 查看本文章
6.2 image
免费传图片的
6.3 swiper，swiper-item
轮播图组件
- wxml文件:
<!--y原图的长宽:880*387 -->
<swiper autoplay='true' interval='3000' circular='true' indicator-dots='true' indicator-color='blue' indicator-active-color='red'>
<swiper-item><image src='https://i0.hdslb.com/bfs/archive/d6407705f547adfd293d1aba4fc1586fe694aafa.jpg@1375w_605h_1c_100q.webp' mode='widthFix'></image></swiper-item>
<swiper-item><image src='https://i0.hdslb.com/bfs/archive/058056424b94c3ff8c1facc940f48ce3bfe423a5.jpg@1375w_605h_1c_100q.webp' mode='widthFix'></image></swiper-item>
<swiper-item><image src='https://i0.hdslb.com/bfs/archive/bf2d296709c5222d5dae21cd2d2eab7dfdbce429.jpg@1375w_605h_1c_100q.webp' mode='widthFix'></image></swiper-item>
</swiper>
- wxss文件:
swiper{
width: 100%;
height: 140.727*750/320 rpx;
}
image{
width: 100%;
}
6.4 px和rpx转换
apx = 750rpx;
1px = 750 / a rpx;
1rpx a / 750 px;
6.5 navigator标签
类似于a 标签
6.6 rich-text
富文本标签
6.7 button标签
<button size="mini" loading="true" plain="true">按钮</button>
<button open-type='share'>share</button>
<button open-type='getUserInfo'>getUserInfo</button>
<button open-type='openSetting'>openSetting</button>
<button open-type='feedback'>feedback</button>
6.8 icon标签
<icon type="success" size="23" color="red"></icon>
6.9 redio单选框
<radio-group>
<radio color='red' value='meal' >男</radio>
<radio color='red' value='femeal' >女</radio>
</radio-group>
6.10 checkbox复选框
<checkbox-group>
<checkbox>篮球</checkbox>
<checkbox>足球</checkbox>
<checkbox>羽毛球</checkbox>
</checkbox-group>