第一节、了解
小程序就是一种不需要下载安装即可使用的应用,用户扫一扫或者搜一搜即可打开应用
了解以下词汇
api 应用接口(封装好的函数等)
app 手机上的应用
h5 移动端页面
小程序 移动端页面
mp和app对比
app:手机应用必须要下载、安装、注册等
mp: 不需要下载安装即可使用
小程序特点
1 不需要下载安装即可使用导致了第一次打开小程序时会加载该应用
2 小程序代码不能超过2m(提高客户体验),因此小程序中图片采用的网络图片,但是图标是可以的
3 小程序代码容量可以突破2m,不能超过20M(通过分包技术)
4 小程序开发语言依然是js
提前准备
百度 "微信公众平台"
1 下载微信开发者工具
2 查看自己的appid(将来会把该id用到项目中) --开发--开发管理---开发设置
百度 "api 小程序" 查看官方文档
通过微信开发者工具创建项目
介绍微信开发者工具界面
预览: 调试器在手机屏幕上的
真机调试: 调试器在PC端,方便调试
编译:一般情况下当ctrl+s保存时会自动编译,如果遇到缓存等bug,点击该按钮可以强制重新编译
上传:上线才用
提前配置:
详情---》本地设置---》打钩不检验合法域名。。。。
微信中发送的ajax的域名必须是https开头,并且需要在官网中配置使之合法,才能够正常发请求
第二节、项目结构
pages (页面)
目录
目录.js 全局业务
目录.json 局部配置
目录.wxml 页面布局
目录.wxss 页面样式
.eslintrc.js 代表编写习惯约束 (老大让小弟统一编码风格)
app.js 全局业务
app.json 全局配置
app.wxss 全局样式
页面(局部)配置 > 全局配置
第三节、新建页面
页面的组成:一个目录+4个同名文件(js、json、wxml、wxss),位置:pages下
js:业务(事件注册、钩子函数、方法等)
json:当前页面的配置
wxml:当前页面的布局
wxss:当前页面的样式
方式1:
在pages下新建xx目录,然后选择该目录右键--》新建page,取前缀名,名字和目录xx匹配
方式2:直接手动配置路由,程序能够自动帮你新建页面
路由是自动帮你配置的
第四节、app.json (全局配置)
1 配置路由 pages
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
配置语法:pages/目录/前缀文件
注意:默认访问的是配置的第一个路由
指定默认访问的页面
1 点击 普通编译 按钮
2 添加编译模式
3 编辑模式名称和启动页面(去选择不要手写)
4 以后选择模式名称默认启动对应页面
2 窗口表现 window
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#13bb67",
"navigationBarTitleText": "xxx",
"navigationBarTextStyle": "white",
自定义导航
"navigationStyle":"custom"
},
3 tab
栏 tabbar
百度 ”iconfont“ 下载图标
"tabBar": {
"color":"#ccaa11",
"selectedColor":"#ee7897",
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath":"/img/home.png",
"selectedIconPath":"/img/home2.png"
},
{
"pagePath": "pages/cat/cat",
"text": "分类",
"iconPath":"/img/cat.png",
"selectedIconPath":"/img/cat2.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath":"/img/my.png",
"selectedIconPath":"/img/my2.png"
}
]
},
第五节、样式
单位:rpx
作用:可以根据屏幕宽度进行自适应
公式:rpx= 750 * 元素在设计稿中的宽度 /设计稿基准宽度
设计稿基准宽度:按照UI设计师来规定的
比如:设计稿基准宽度为800px ,量出来的宽度为100, ----》750 * 100 /800 =93.75rpx
比如:设计稿基准宽度为750px ,量出来的宽度为100, ----》750 * 100 /750 =100rpx
建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
width如果写成750rpx,则正好是手机的宽度
第六节、组件
1 view 块级器
阻止冒泡
<view class="father" hover-class="change_f">
<view class="son" hover-class="change_s" hover-stop-propagation>
</view>
</view>
2 text 文本
1 选中 <text user-select>我的</text>
2 支持空格 <text space="emsp/ensp">蜗 牛</text>
3 rich-text 富文本
富文本支持标签,类似于v-html
<rich-text nodes="<h1>123</h1>"/>
4 image 图片
<image src="/img/a1.jpeg" mode="heightFix"/>
<image src="https://img0.baidu.com/it/u=2392075222,321187020&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=350" mode="widthFix"/>
mode="widthFix/heightFix" -->缩放
widthFix :宽不变,高度自适应---》适用于宽>高的图
heightFix:高不变,宽度自适应 ---》适用于高>宽的图
5 navigator导航
<navigator url="" open-type=""></navigator>
注意:只能跳转内部页面
内部页面分类:
1 tabbar页面
2 非tabbar页面
注意:跳转页面时以/开头
<navigator url="/pages/test/test">跳转test(非tabbar页面)</navigator>
<navigator url="/pages/my/my" open-type="switchTab">我的(tabbar页面)</navigator>
6 scroll-view 滚动容器 (重点)
分类:1 横向滚动 2 竖向滚动
scroll-view标签本身不支持display-flex
1 横向滚动
<scroll-view scroll-x>
<view class="v">
<view> aa </view>
<view> bb </view>
<view> cc </view>
<view> dd </view>
<view> ee </view>
<view> ff </view>
</view>
scroll-view .v{
/* border:1rpx red solid; */
display: flex;
}
.v view{
width: 300rpx;
flex-shrink: 0;
}
2 竖向滚动:注意:竖向滚动一定要给scroll-view 一个高度(通过样式来控制)
<scroll-view scroll-y>
<view> aa </view>
<view> bb </view>
<view> cc </view>
<view> dd </view>
<view> ee </view>
<view> ff </view>
</scroll-view>
scroll-view{
border:1rpx red solid;
height: 100vh;
width: 200rpx;
/* display: flex; */
}
view{
height: 400rpx;
}
去掉滚动条
::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
7 swiper -轮播图
<swiper
indicator-dots
indicator-color="rgba(133,222,11,0.6)"
indicator-active-color="rgb(255,255,255)"
autoplay
interval="1000"
circular
current="1"
>
<swiper-item>
<image src="https://img0.baidu.com/it/u=3970160540,1330599016&fm=253&fmt=auto&app=120&f=JPEG?w=994&h=500" mode="widthFix"/>
</swiper-item>
<swiper-item>
<image src="https://img0.baidu.com/it/u=3760590391,932254407&fm=253&fmt=auto&app=120&f=JPEG?w=888&h=500" mode="widthFix"/>
</swiper-item>
<swiper-item>
<image src="https://img0.baidu.com/it/u=1603601431,3825281494&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" mode="widthFix"/>
</swiper-item>
</swiper>
第七节、数据绑定
所有页面的业务都放在对应js文件中:
Page({
data: {
},
})
渲染:
1 在wxml中通过{{xxx}}模板来进行渲染
2 写活属性 <标签 属性="{{xxx}}"
列表渲染
默认item代表数组中的每一个元素
默认indes代表下标
理想中的写法:wx:key="{{item.id}}"
正确的写法:wx:key="{{id}}"
<view wx:for="{{stus}}" wx:key="id">
{{index}} --{{item.name}}
</view>
别名:
<view wx:for="{{stus}}" wx:key="id" wx:for-item="s" wx:for-index="i">
{{i}} --{{s.name}}
</view>