雨落辰潇-文档站

Appearance

微信小程序 ​

项目的体积不能超过2M

2015年html5发布
2017年微信小程序第一次上线

背景移动端 ​

移动端发展 ​

ts
2015年html5发布前，移动端开发
	安卓开发
    iOS开发
2015年html5发布后
	支持移动端开发：安卓和iOS开发都可以使用
    支持pc开发：网站

视口适配 ​

ts
眼睛可以看到内容的界面就是视口：展示内容区域

pc端的视口：当前浏览器的大小
pc端的视口：布局视口

问题：网页塞到手机里,手机视口看不全网页
解决：
	厂商统一一个标准：
		手机视口：布局视口(固定页面宽度 980px)
问题：存在缩放问题,字体偏小
解决：
	苹果公司：
    	手机视口：开启理想视口(页面和设备一样宽)
问题：网页的宽度不固定(在不同的设备上显示不一样，引发不适配问题)
解决：
	1 通过rem度量单位适配
    2 等比例放大，等比例缩小:等比例更改根元素的字体大小
    	通过计算等比例 计算出不同设备上的根元素的字体大小(750px 50px 是产品经理给的原型图的大小)
        // 当前设备宽度				   750px	375px
									
		// HTML根节点的font-size		50px	  ?
        function setRem(){
            // 获取视口根节点
            const html = document.documentElement;
            // 设置根节点字体大小
            html.style.fontSize = (document.documentElement.clientWidth *50)/750 + 'px'
        }
		// 浏览器视口适配
		window.onresize = setRem

rem单位 ​

ts
# css3中新增的单位

# rem 根元素(html标签)字体大小的倍数 多用于移动端的使用

# 根元素(html标签)字体大小一般设置 整数
html
<body>
	<div>123</div>    
</body>
<style>
    html{
        font-size:100px
    }
    body{
        font-size:16px
    }
    div{
        width:2rem,
        heigh:2rem,
    }    
</styles>

小程序存储上限

ts
小程序存储上限为10M,浏览器的存储上限是5M

基础入门 ​

微信小程序文档 ​

ts
APPID ： 开发-开发管理
文档：
https://developers.weixin.qq.com/miniprogram/dev/reference/
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html
框架：配置文件的配置项解释
组件：组件
API：系统的API接口(分享，摄像头)

项目结构 ​

ts
pages:					放置的微信小程序应用的页面
sitemap.json:			配置文件,用户是否可以在微信内搜索小程序配置
project.config.json:	项目的配置文件

// app相关的都是小程序应用文件
app.js:					App函数,用于创建微信小程序应用app,App是内置的函数
app.json:				微信小程序应用app配置文件:小程序应用导航栏、页面路由的位置
app.wxss:				书写全局样式的地方[应用当中全部页面都可以使用样式]

一个应用app有多个页面page

page在pages文件夹中

一个页面page由四个文件组成：wxml(静态结构) wxss(样式) js(逻辑) json(配置文件)

全局配置 ​

app.json 微信小程序应用app全局配置文件

ts
{
    // 配置全局的样式
    "window": {
        "navigationBarBackgroundColor": "#3cc", // 导航的背景颜色 只能设置16进制
        "navigationBarTextStyle": "white", // 设置小程序的导航颜色
        "navigationBarTitleText": "慕尚花坊"// 设置小程序的导航标题
    },
    // 配置路由的时候最前边没有 '/' 标记
    "pages": [ // 配置路由,默认谁在最前边显示哪一个页面
        "pages/home/home",
        "pages/category/category",
        "pages/shopcart/shopcart",
        "pages/my/my",
        "pages/login/login",
        "pages/edit/edit",
        "pages/goods/goods",
        "pages/order/order",
        "pages/order/paySuccess/paysuccess",
        "pages/address/address",
        "pages/address/add/add"
    ],
    // 配置底部的tab选项卡
    "tabbar":[{}],
    // 配置入口默认的组件显示
    "entryPagePath":""
}

tabbar

ts
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面
属性类型必填默认值描述
colorHexColor是tab 上的文字默认颜色，仅支持十六进制颜色
selectedColorHexColor是tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColorHexColor是tab 的背景色，仅支持十六进制颜色
borderStylestring否blacktabbar 上边框的颜色， 仅支持 black / white
listArray是tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
positionstring否bottomtabBar 的位置，仅支持 bottom / top
customboolean否false自定义 tabBar，见详情

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下

属性类型必填说明
pagePathstring是页面路径，必须在 pages 中先定义
textstring是tab 上按钮文字
iconPathstring否图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。
selectedIconPathstring否选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。

app.wxss：书写全局样式的地方

ts
page{
    width: 100%;
    height: 100%;
}

app.js：全局js入口文件

ts
//通过App内置函数:创建微信小程序应用
App({

    /**
     * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
     */
    onLaunch: function () {

    },

    /**
     * 当小程序启动，或从后台进入前台显示，会触发 onShow
     */
    onShow: function (options) {

    },

    /**
     * 当小程序从前台进入后台，会触发 onHide
     */
    onHide: function () {

    },

    /**
     * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
     */
    onError: function (msg) {

    }
})

页面结构 ​

ts
一个页面page由四个文件组成：wxml(静态结构) wxss(样式) js(逻辑) json(配置文件)

新建页面步骤 ​

ts
新建一个文件夹,然后鼠标右击,再新建一个Page页面

wxml文件 ​

用于组成当前页面的静态页面 类似于Vue中 template

ts
view组件 替代 div标签

button组件 替代 button按钮 类似于 element-plus中的button组件

text组件 替代 span标签

image组件 替代 img标签   

input组件 替代 input标签 类似于 element-plus中的input组件
xml
<view>{{text}}</view>
<view>{{array[0].msg}}</view>

wxss文件 ​

用于控制当前页面的样式 类似于Vue中 style

ts
# 微信小程序中的样式 通过 类名的 形式控制,不要使用标签

js文件 ​

用于控制当前页面的逻辑判断 类似于Vue中 script

ts
Page({ // 注册一个页面
    data: {
        msg:1
        text: 'init data',
        array: [{msg: '1'}, {msg: '2'}]
    }
    handle(){
        // 这种不是响应式数据,需要使用 setData函数设置 数据状态才是响应式
        console.log(this.data.msg += 1) // this 指向当前页面的配置对象(Page函数体内部对象)
        const newMsg = this.data.msg + 1;
        // 设置响应式数据
        this.setData({
            msg:newMsg
        })
	}
})

json文件 ​

用于控制当前页面的配置

页面的配置文件优先级大于全局的配置文件设置

ts

{
    "navigationBarBackgroundColor":"#ccc" // 设置当前页面的导航栏背景颜色
    "navigationBarTextStyle": "black", // 设置当前页面的导航栏文字颜色
    "navigationBarTitleText":"微信小程序" // 设置当前页面的导航栏文字
    "usingComponents": {	// 设置当前页面组件注册
        "van-button": "@vant/weapp/button/index" // 注册vant组件按钮
    },
    "navigationStyle": "custom" // 设置当前页面的导航栏隐藏
}

视口自适应 ​

ts
使用 rpx 作为计量单位 相当于JS中的rem(同时还需要设置事件 onresize)

以iPhone6为例 200rpx 相当于 100px

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

事件 ​

单击事件

在组件上绑定点击事件，通过 bind:tap或bindtap设置，类似 @click=""作用

微信小程序事件的回调不能够传参(只有默认的event对象)

event是当前点击的元素对象

可以结合event对象和自定义属性(data-属性名)实现传递参数

ts
绑定事件 有两种方式: bind:tap(冒泡) catch:tap(不冒泡)
ts
<button type="primary" size="mini" bind:tap="handle" data-flag="1">按钮1</button>
<button type="primary" size="mini" catch:tap="handle1">按钮2</button>
ts
Page({
    data: {
        msg:1
        text: 'init data',
        array: [{msg: '1'}, {msg: '2'}]
    }
	// 事件的回调不能够传参,可以使用自定义属性(data-属性名)在标签上,然后通过 event获取属性值
    handle(event){
        console.log(event.currentTarget.dataSet.flag) // event是当前点击的元素对象
        const newMsg = this.data.msg + 1; // (正确的)
        
        this.setData({
            msg:newMsg
        })
	}
})

使用案例1

/pages/index/index.js

ts
Page({
    data: {
        msg:1
        text: 'init data',
        array: [{msg: '1'}, {msg: '2'}]
    },
    handle(){
        // 这种不是响应式数据,需要使用 setData函数设置 数据状态才是响应式
        // this 指向当前页面的配置对象(Page函数体内部对象)
        const newMsg = this.data.msg + 1;
        // 设置响应式数据
        this.setData({
            msg:newMsg
        })
	}
})
ts
Component({
  data: {
    msg:445
  },
  methods: {
    // 事件处理函数
    handle(){
        // 这种不是响应式数据,需要使用 setData函数设置 数据状态才是响应式
        // this 指向当前页面的配置对象(Page函数体内部对象)
        const newMsg = this.data.msg + 1;
        console.log(newMsg)
        // 设置响应式数据
        this.setData({
            msg:newMsg
        })
	}
  },
})

/pages/index/index.wxml

xml
<view style="margin-top:100px;text-align: center;">测试</view>
<text>{{msg}}</text>
<button type="primary" size="mini" bind:tap="handle">点我</button>

使用案例2

home.wxml

xml
<!-- tab选项卡 -->
<view class="tab">
    <!-- 事件的回调不能够传参,可以使用自定义属性(data-属性名)在标签上,然后通过 event获取属性值 -->
    
    <view class="item {{flag==1?'active':''}}" bind:tap="handlerClick" data-flag="1">一生期</view>
    <view class="item {{flag==2?'active':''}}" bind:tap="handlerClick" data-flag="2">二生期</view>
    <view class="item {{flag==3?'active':''}}" bind:tap="handlerClick" data-flag="3">三生期</view>
</view>
<view class="first" wx:if="{{flag==1}}">
    <view>fubuki</view>
</view>
<view class="second" wx:if="{{flag==2}}">
    <view>shiyin</view>
</view>
<view class="third" wx:if="{{flag==3}}">
    <view>xingjiesuisui</view>
</view>

home.js

js
// 获取点击对象
    handlerClick(event){ // event是当前点击的元素对象
        // 获取点击这个元素自定义属性的属性值
        const newFlag = event.currentTarget.dataset.flag
        // 修改数据状态
        this.setData({
            flag:newFlag
        })
    }

home.wxss

css
.tab{
    display: flex;
}
.tab .item{
    /* 伸缩容器被瓜分完 */
    flex:1;
    text-align: center;
    line-height: 40rpx;
    border: 2rpx solid #ccc;
}
.tab .active{
    background: aquamarine;
}

指令 ​

微信小程序中的指令只支持三种

ts
wx:if
wx:else
wx:for

列表渲染 ​

ts
wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

wx:key 指定唯一的标识
	wx:key 的值以两种形式提供
    	字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变(数组对象中的属性名,而不是属性值)
        保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字

wx:for-item 可以指定数组当前元素的变量名,起别名
wx:for-index 可以指定数组当前下标的变量名,起别名

使用案例

home.js

js
Page({
    data: {
        todos:[
            {
                id:1,
                title:'阿夸'
            },
            {
                id:2,
                title:'mea'
            },
            {
                id:3,
                title:'sakuna'
            }
        ]
        
    },
})

home.wxml

xml
<view>列表渲染</view>
<!-- {{}} 差值表达式中 写的是 data 中的数组数据属性名 -->
<text wx:for="{{todos}}" wx:for-item="aqua" wx:key='id'>{{index}}:{{aqua.title}}</text>

显示隐藏 ​

ts
wx:if  		控制元素的显示与隐藏 类似于 v-if
wx:else		控制元素的显示与隐藏,配合wx:if使用
hidden 		控制元素显示与隐藏,不是销毁类似于 v-show

使用案例

home.js

ts
Page({
    data: {
        todos:[],
        visite:false
        
    },
     handle(){
        newVisite = !this.data.visite
        // 设置响应式数据
        this.setData({
            visite:newVisite
        })
	}
})

home.wxml

ts
// 控制元素的显示与隐藏 类似于 v-if
<view wx:if="{{visite}}">aqua</view>
// 控制元素的显示与隐藏,配合wx:if使用
<view wx:else>mea</view>
// 控制元素显示与隐藏,不是销毁类似于 v-show
<view hidden="{{visite}}">nano</view>

<button type="primary" size="mini" bind:tap="handle">显示与隐藏</button>

插值表达式 ​

微信小程序中的插值表达式可以在 组件属性的属性值上直接设置

ts
<view style="margin-top:{{font}}px">{{msg}}</view>
// <view :style="{fontSize:}">{{msg}}</view> // vue的写法,在微信中不可用
Page({
    data: {
        msg:1
        font: '16',
        
    },
    handle(){
        // 这种不是响应式数据,需要使用 setData函数设置 数据状态才是响应式
        // this 指向当前页面的配置对象(Page函数体内部对象)
        const newMsg = this.data.font + 1;
        // 设置响应式数据
        this.setData({
            font:newMsg
        })
	}
})

Copyright © 2024 雨落辰潇