Java
46 56 68 75 94 107
| 结构 | 传统web | 微信小程序 |
|---|---|---|
| 结构 | HTML | WXML |
| 样式 | CSS | WXSS |
| 逻辑 | JavaScript | JavaScript |
| 配置 | 无 | JSOn |
框架
小程序配置
- 全局配置
- 页面配置
- sitemap配置
小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，默认为所有页面都允许被索引
WXML 语法参考
| WXML | HTML |
|---|---|
| text | span 行内元素 |
| view | div 块元素 |
- 数据绑定
- 列表渲染
- 条件渲染
组件
view
- 试图容器
text
- 基础内容
img
- 媒体组件
- image组件默认宽度320px、高度240px
- src
- mode
aspectFit
widthFix - lazy-load
swiper
- 视图容器
- 滑块视图容器
- 只可放置swiper-item组件
navigator
- 导航组件
- target
- url
- open-type
navigate：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
redirect：关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面
switchTab：跳转到tabbar页面，并关闭其他所有非tabbar页面
reLaunch：关闭所有页面，打开到应用内的某个页面
navigateBack：关闭当前页面，返回上一页面或多级页面。可通过getCurrentPages()获取当前的页面栈，决定需要返回几层
exit：退出小程序，target="miniProgram"时生效
rich-text
- 基础内容
- 富文本
- 可以将字符串解析成对应标签，类似vue中v-html功能
button
- 表单组件
- 按钮
1.外观 2.能力（模拟机，只在真机）
icon
- 基础内容
radio
- 表单组件
- 单选项目
checkbox
- 表单组件
- 多选项目
指南
自定义组件
/demo17 /components
小程序生命周期
应用生命周期 app.js (框架>框架接口>小程序App>App) (demo17)
页面生命周期 xxx.js (框架>框架接口>页面>Page) (demo18)
小程序实例
1. 小程序的第三方的框架
- 腾讯 wepy 类似vue
- 美团 mpvue 类似vue
- 京东 taro 类似react
- 滴滴 chameleon
- uni-app 类似 vue
- 原生框架 MINA
2. 帮助文档
- 小程序开发文档
- mdn
- 阿里巴巴字体 iconfont
3. 项目搭建
3.1 新建小程序项目
填入自己的appid
3.2 搭建项目结构
- 删除app.json里的pages里的log
- 删除pages里的log目录
- 删除app.wxss里的全部
- 删除app.js里的全部，写入 wx-app回车，里面的 globalData（全局数据） 也不要
- 来到pages > index > index.wxml 默认代码不要了，来个首页
- 来到pages > index > index.wxss 默认代码不要了
- 来到pages > index > index.js 默认代码不要了，来个wx-page回车
- 来到pages > index > index.json 添加"navigationBarTitleText":“MS首页”
- 删除pages里的utils目录
- 搭建目录
| 目录名 | 作用 |
|---|---|
| styles | 存放公共样式 |
| components | 存放组件 |
| lib | 存放第三方库 |
| utils | 自己的帮助库 |
| request | 自己的接口帮助库 |
3.3 搭建项目的首页
| 项目名称 | 名称 |
|---|---|
| 首页 | index |
| 分类页面 | category |
| 商品列表页面 | goods_list |
| 商品详情页面 | goods_detail |
| 购物车页面 | cart |
| 收藏页面 | collect |
| 订单页面 | order |
| 搜索页面 | search |
| 个人中心页面 | user |
| 意见反馈页面 | feedback |
| 登录页面 | login |
| 授权页面 | auth |
| 结算页面 | pay |
3.4 引入字体图标
- 打开阿里巴巴字体图标网站
- 选择需要的图标到购物车
- 添加至项目
- 项目中 > Font class > 查看在线连接 > 在浏览器中打开 > 全部复制
- 将样式文件由css修改为wxss
vscode > styles > 创建iconfont.wxss > 粘贴到这里 > 保存 - 小程序中引入
app.wxss中引入 @import “./styles/iconfont.wxss”;
测试 <text class=“iconfont icon-shoucang4”>
3.5 搭建项目tabbar结构
参考之前讲解的小程序基础中的tabbar知识点
- 准备icon
- pages同层级创建icons目录，将准备的icon放到这里
"tabBar": {
"color": "#000",
"selectedColor": "#bc8f8f",
"backgroundColor": "#828ca1",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icons/home.png",
"selectedIconPath": "icons/home-fill-bc8f8f.png"
},
{
"pagePath": "pages/category/index",
"text": "分类",
"iconPath": "icons/all.png",
"selectedIconPath": "icons/all-fill-bc8f8f.png"
},
{
"pagePath": "pages/cart/index",
"text": "购物车",
"iconPath": "icons/cart-Empty.png",
"selectedIconPath": "icons/cart-Empty-fill-bc8f8f.png"
},
{
"pagePath": "pages/user/index",
"text": "我的",
"iconPath": "icons/account.png",
"selectedIconPath": "icons/account-fill-bc8f8f.png"
}
]
}
4. 首页
4.1 效果
4.1.1 自定义组件
- components里创建SearchInput目录，在微信开发者工具里面，右键SearchInput点击创建Component，名字和目录名相同SearchInput
- 首页当中引入这个组件
声明引用，在要引入该组件的页面的json文件中写入下面代码之后，可以在页面当中写上该标签
"usingComponents": {
/* 要引入的组件名：组件相对路径 */
"SearchInput":"../../components/SearchInput/SearchInput"
}
<view class="ms_index">
<!-- 搜索框 开始 -->
<SearchInput></SearchInput>
<!-- 搜索框 结束 -->
</view>
- 编写SearchInput组件
4.1.2 轮播图
- 获取轮播图接口
data: {
// 轮播图数组
swiperList:[]
},
// 页面开始加载 就会触发
onLoad: function(options) {
// 1. 发送异步请求获取轮播图数据（发起 HTTPS 网络请求）
var reqTask = wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
// 成功之后的回调函数
success: (result) => {
this.setData({
swiperList:result.data.message
})
}
/*
data: {}, // 要发送什么数据到后台
header: {'content-type':'application/json'}, // 请求头，可以删掉因为有默认值
method: 'GET', // 请求方式 get 默认值，可删掉
dataType: 'json', // 想要的返回值的类型，默认值，可删掉
responseType: 'text', // 返回数据的类型 文本类型，默认值，可删掉
fail: () => {}, // 失败回调函数
complete: () => {} // 成功或失败都会调用的函数
*/
});
}
- 跟标签相结合最终渲染出来
4.1.3 导航
4.1.4 楼层
5. 分类页面
vscode代码格式化 shift+alt+f
折叠所有区域代码的快捷： ctrl + k ctrl + 0
展开所有折叠区域代码的快捷：ctrl +k ctrl + J
- 分析页面数据
- 实现点击功能
- 实现缓存功能
- 小程序中支持es7的async语法
解决回调陷阱
1.在小程序的开发工具中，勾选es6转es5语法
2.下载facebook的regenerator库中的regenerator/packages/regenerator-runtime/runtime.js （https://github.com/facebook/regenerator/blob/master/packages/regenerator-runtime/runtime.js）
3.在小程序目录下新建文件夹lib/runtime/runtime/js， 将代码拷贝进去
4.在每个需要使用async语法的页面js文件中，都引入（不能全局引入）
import regeneratorRuntime from ‘…/…/lib/runtime/runtime’;
*旧版小程序或旧手机兼容性不好，
6.商品列表页面
- 自定义组件
- 下拉刷新
onReachBottom
7.商品详情页面
-
api
word-break:break-all; //文字自动换行 display:-webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp:2;
// every 数组方法 会遍历 会接收一个回调函数 那么 每一个回调函数都返回true 那么 every方法的返回值为true
// 只要 有一个回调函数返回了false 那么不再循环执行，直接返回false
// 空数组 调用 every方法 返回值就是true
// const allChecked=cart.length?cart.every(v=>v.checked):false;
- 动态渲染
- 功能
企业账号 与 支付权限 关系
2 微信支付
1 那些人 那些账号 可以实现微信支付
1 企业账号
2 企业账号的小程序后台中 必须给开发者添加上白名单
1 一个 appid 可以同时绑定多个开发者
2 这些开发者就可以公用这个APPID和它的开发权限
