小程序 客户端 前端

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. 小程序的第三方的框架

1. 腾讯 wepy 类似vue
2. 美团 mpvue 类似vue
3. 京东 taro 类似react
4. 滴滴 chameleon
5. uni-app 类似 vue
6. 原生框架 MINA

2. 帮助文档

1. 小程序开发文档
2. mdn
3. 阿里巴巴字体 iconfont

3. 项目搭建

3.1 新建小程序项目

填入自己的appid

3.2 搭建项目结构

1. 删除app.json里的pages里的log
2. 删除pages里的log目录
3. 删除app.wxss里的全部
4. 删除app.js里的全部，写入 wx-app回车，里面的 globalData（全局数据） 也不要
5. 来到pages > index > index.wxml 默认代码不要了，来个首页
6. 来到pages > index > index.wxss 默认代码不要了
7. 来到pages > index > index.js 默认代码不要了，来个wx-page回车
8. 来到pages > index > index.json 添加"navigationBarTitleText":“MS首页”
9. 删除pages里的utils目录
10. 搭建目录

目录名	作用
styles	存放公共样式
components	存放组件
lib	存放第三方库
utils	自己的帮助库
request	自己的接口帮助库

3.3 搭建项目的首页

项目名称	名称
首页	index
分类页面	category
商品列表页面	goods_list
商品详情页面	goods_detail
购物车页面	cart
收藏页面	collect
订单页面	order
搜索页面	search
个人中心页面	user
意见反馈页面	feedback
登录页面	login
授权页面	auth
结算页面	pay

3.4 引入字体图标

1. 打开阿里巴巴字体图标网站
2. 选择需要的图标到购物车
3. 添加至项目
4. 项目中 > Font class > 查看在线连接 > 在浏览器中打开 > 全部复制
5. 将样式文件由css修改为wxss
   vscode > styles > 创建iconfont.wxss > 粘贴到这里 > 保存
6. 小程序中引入
   app.wxss中引入 @import “./styles/iconfont.wxss”;
   测试 <text class=“iconfont icon-shoucang4”>

3.5 搭建项目tabbar结构

参考之前讲解的小程序基础中的tabbar知识点

1. 准备icon
2. 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 自定义组件

1. components里创建SearchInput目录，在微信开发者工具里面，右键SearchInput点击创建Component，名字和目录名相同SearchInput
2. 首页当中引入这个组件
   声明引用，在要引入该组件的页面的json文件中写入下面代码之后，可以在页面当中写上该标签

"usingComponents": {
	/* 要引入的组件名：组件相对路径 */
	"SearchInput":"../../components/SearchInput/SearchInput"
}

<view class="ms_index">
    <!-- 搜索框 开始 -->
    <SearchInput></SearchInput>
    <!-- 搜索框 结束 -->
</view>

3. 编写SearchInput组件

4.1.2 轮播图

1. 获取轮播图接口

  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: () => {}    // 成功或失败都会调用的函数
      */
    });
      
  }

2. 跟标签相结合最终渲染出来

4.1.3 导航

4.1.4 楼层

5. 分类页面

vscode代码格式化 shift+alt+f
折叠所有区域代码的快捷： ctrl + k ctrl + 0
展开所有折叠区域代码的快捷：ctrl +k ctrl + J

1. 分析页面数据
2. 实现点击功能
3. 实现缓存功能
5. 小程序中支持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.商品列表页面

1. 自定义组件
2. 下拉刷新
   onReachBottom

7.商品详情页面

1. 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. 动态渲染
3. 功能

企业账号 与 支付权限 关系

  2 微信支付
    1 那些人 那些账号 可以实现微信支付
      1 企业账号
      2 企业账号的小程序后台中 必须给开发者添加上白名单
        1 一个 appid 可以同时绑定多个开发者
        2 这些开发者就可以公用这个APPID和它的开发权限