微信小程序（由浅到深）

一. 项目基本配置

1. 项目组成

2. 常见的配置文件解析

• project.config.json：项目配置文件, 比如项目名称、appid等 ； 配置详情
• sitemap.json：小程序搜索相关的；配置详情
• app.json：全局配置
• page.json：页面配置；
• app.js 可共享全局属性值

3. app.json全局的五大配置

• pages: 页面路径列表
  • 用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。
  • 小程序中所有的页面都是必须在pages中进行注册的。
• window: 全局的默认窗口展示
  • 用户指定窗口如何展示, 其中还包含了很多其他的属性
• tabBar: 顶部tab栏的展示
• 详情配置参考

{
  "pages": [
    "pages/home/home"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#f6f866",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#777",
    "selectedColor": "#1cb9ce",
    "list": [{
        "pagePath": "pages/home/home",
        "text": "主页面”},
      {
        "pagePath": "pages/day02/day02",
        "text": "home"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

4.单个页面中的page配置

• 可直接新建page 并回车，自动添加到pages中 或者在pages中直接指定
  

• 同时每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。

  • 页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项
  • 具体配置参考官网

{
  "usingComponents": {},
  "navigationBarTitleText": "主页面",
  "backgroundTextStyle": "dark",  背景文字颜色
  "enablePullDownRefresh": true,  允许下拉刷新
  "backgroundColor":"#f70", 		背景颜色
  "onReachBottomDistance": 100     距离底部多少触发事件
}

  // 下拉刷新， 获取最新的数据
  onPullDownRefresh() {
    console.log('监听下拉刷新');
    // 停止下拉刷新
    setTimeout(() => {
      // 异步请求
      wx.stopPullDownRefresh({
        success: (res) => {
          console.log('停止', res)
        },
      })
    }, 1000)

  },
  // 监听页面滚动到底部
  onReachBottom() {
    console.log('滚动到底部多少距离时加载更多~~  100px');
    this.setData({
      listCounter: this.data.listCounter + 30
    })
  }

5. App函数

• App()实例可以全局共享的（单例对象），所以可以将一些共享数据放在这里；
• App函数的参数

作用一：

• 判断群聊会话中打开、小程序列表中打开、微信扫一扫打开、另一个小程序打开
  • 在onLaunch和onShow生命周期回调函数中的options参数，判断scene值
  • 文档参考

作用二：定义全局App的数据

• app.js

 // app实例可以共享全局数据
  globalData: {
    userInfo: null,
    token: 'Afjwt-12mandak-45'
  }

• home.js

 onLoad() {
    const {
      globalData
    } = getApp() // 全局的app实例
    console.log(globalData.token);
    // 拿到token发送网络请求-页面初始化
    this.setData({
      globalData
    })
  },

作用三：生命周期函数

• 在生命周期函数中，完成应用程序启动后的初始化操作
  • 完成登录操作，获取token
    

6.tabBar配置

• tabBar中只能配置最少 2 个、最多 5 个 tab 页签
• 当渲染顶部 tabBar 时，不显示 icon，只显示文本
• 更多配置参考官网
  

{
    "pages": [
        "pages/hone/hone",
        "pages/Profile/Profile",
        "pages/experience/experience",
        "pages/skill/skill",
        "pages/index/index",
        "pages/logs/logs"
    ],
    "tabBar":{
        "color": "#777",
        "selectedColor": "#1cb9ce",
        "list":[
            {"pagePath": "pages/hone/hone","text":"简历信息","iconPath": "/pages/img/icon08.png","selectedIconPath": "/pages/img/icon08.png"},
            {"pagePath": "pages/skill/skill","text":"个人技能","iconPath": "/pages/img/icon04.png","selectedIconPath": "/pages/img/icon04.png"},
            {"pagePath": "pages/experience/experience","text":"项目经历","iconPath": "/pages/img/icon02.png","selectedIconPath": "/pages/img/icon02.png"},
            {"pagePath": "pages/Profile/Profile","text":"自我评价","iconPath": "/pages/img/icon06.png","selectedIconPath": "/pages/img/icon06.png"}
        ]
    },
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}

二. 基本语法，事件，单位

1. 语法

参考官网基本语法解释

• 文本渲染

{{ msg}}可以执行简单的js表达式
{{2+3}}
{{msg.length}}

• 条件渲染

wx:if=""
wx:elif=""
wx:else
hidden   // true 隐藏

• 列表渲染
• wx:key 针对不同的数组类型有不同的写法
  • 普通数组 wx:key="*this"
  • 数组对象 wx:key="字符串" 表示对象唯一属性

// 默认item就是数据 ，index是下标
wx:for="{{list}}"
wx:key="index"
	{{item}}
	{{index}}

• 自定义列表渲染

定义item与index的名称
wx:for="{{list}}}"
wx:for-item="myitem"
wx:for-index="myidx"
{{myidx}}
{{myitem}}

2. 事件

格式：<元素 bind事件名= “回调”>

• 示例：<view bindtap="fn1"></view>
• <switch bindchange="fn2"></switch>
• 小程序中绑定事件，通过bind和capture关键字来实现。如 bindtap 和 capture-bind:tap，
• bind 是事件冒泡外传，capture 是事件捕获里传。capture-bind只能用冒号形式。
• 如果想阻止事件冒泡或捕获可通过catch来绑定事件。如catchtap，capture-catch:tap。

bindInput     表单输入时
bindconfirm    表单输入确认
bindtap      点击时候

• 事件传参

  • 自定义参数 data-*

注意点: <view bindtap="handleTap(100)"></view> 小程序会以为 事件函数名称就是 “handleTap(100)” ，那么它就会去找“handleTap(100)” 这个函数 而不是 “handleTap”

• mask传参
  

• 表单绑定

<input value="{{s1}}" bindinput="inputHd">
// js.js
inputHd(e){
 this.setData({s1:e.detail.value})  // 表单的值获取：e.detail.value
}

• 事件对象属性

• target和currentTarget事件对象属性

• 区别

taget点击inter不能拿到dataset数据currentTarget可以拿到

3. 单位

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

三. 数据响应式修改

1. WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层
2. 小程序的渲染层和逻辑层分别由2个线程管理，两个线程的通信会经由微信客户端做中转

• 数据修改必须调用 this.setData 同react一样
• setData优化

四 . 内置组件

• 内置组件参考

1. button

• button组件中的 open-type属性
  • open-type用户获取一些特殊性的权限，可以绑定一些特殊的事件
• 老旧版本获取用户信息

<button type="primary" bindgetuserinfo="getUserInfo" size="mini" open-type="getUserInfo">getUserInfo</button>

  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },

• 新版本获取用户头像等信息

   <button bindtap="getUserProfile"> 获取头像昵称 </button>

  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },

• 具体解析参考官网

2. image

• image组件默认宽度320px、高度240px
• image支持懒加载
• mode 配置如下

• wx.chooseMedia获取本地图像展示

<button bindtap="hyImageUpload">选择图片上传</button>
<!-- 选择本地图片 -->
<image src="{{imageUrl}}"></image>

 hyImageUpload(){
    wx.chooseMedia({
      camera: 'image',
    }).then(res=>{
      this.setData({
        imageUrl:res.tempFiles[0].tempFilePath
      })
    })
  }

3. input

• 支持双向绑定

<input type="text" model:value=" {{message}}"/>

4. 组件共有属性

• 公共属性 ：参考官网

  • 属性名	类型	描述	注解
    id	String	组件的唯一标示	保持整个页面唯一
    class	String	组件的样式类	在对应的 WXSS 中定义的样式类
    style	String	组件的内联样式	可以动态设置的内联样式
    hidden	Boolean	组件是否显示	所有组件默认显示
    data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
    bind* / catch*	EventHandler	组件的事件	详见事件

五 . WXS使用

• WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
• 在WXML中是不能直接调用Page/Component中定义的函数的.
• 但是某些情况, 可以使用函数来处理WXML中的数据(类似于Vue中的过滤器)，这个时候就使用WXS了
• 必须利用es5语法

// 
<wxs module="format">
  function joinTgether(num) {
    return '￥' + num
  }
  // 必须模块化导出 
  module.exports={
    joinTgether:joinTgether
  }
</wxs>

<block wx:for="{{wxs}}" wx:key="*this">
  <button size="mini" type="warn">{{item}}-{{format.joinTgether(item)}}</button>
</block>

• 模块抽离utils 必须放在.wxs结尾的文件

<button>模块抽离wxs</button>
<wxs module="format" src="/utils_wxs/format.wxs"></wxs>
<block wx:for="{{wxs}}" wx:key="*this">
  <button size="mini" type="warn">{{item}}-{{format.joinTgether(item)}}</button>
</block>

• 每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见；
• 一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现；
• 其他使用参考官网

六，组件

6.1 全局与局部组件注册使用

• 将页面拆分成一个个小的、可复用的组件，这样更加方便组织和管理，并且扩展性也更强
• 在 .json 文件中进行自定义组件声明（将component 字段设为 true 可这一组文件设为自定义组件）：

• 在需要使用的xx.json 文件中导入

{
  "usingComponents": {
    "sel-info": "/components/selection-info/sel-info"
  }
}

• 自定义组件和页面所在项目根目录名 不能以“wx-”为前缀，否则会报错。
• 全局组件在app.json的usingComponents声明某个组件，那么所有页面和组件可以直接使用该组件

6.2 组件样式

• 组件内的样式 对 外部样式 的影响

  • 结论一：组件内的class样式，只对组件wxml内的节点生效, 对于引用组件的Page页面不生效。
  • 结论二：组件内不能使用id选择器、属性选择器、标签选择器
    

• 外部样式 对 组件内样式 的影响

  • 结论一：外部使用class的样式，只对外部wxml的class生效，对组件内是不生效
  • 结论二：外部使用了id选择器、属性选择器不会对组件内产生影响
  • 结论三：外部使用了标签选择器，会对组件内产生影响

• 如何让class可以相互影响

  • 在Component对象中，可以传入一个options属性，其中options属性中有一个styleIsolation（隔离）属性。
  • styleIsolation有三个取值：
    • isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（默认取值）；
    • apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
    • shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置 了

  options: {
    // styleIsolation:"isolated"  // 默认值
    styleIsolation: "apply-shared"
  },

6.3 组件之间的通信

• 文档参考
  
  组件传递数据 - properties

1. 定义子组件

<view style="width: 100%;height:80px;background-color: blueviolet;">
  <button>{{title}}</button>
  <view style="background-color: brown;margin-top: 10px; color: cornsilk;"> {{content}}</view>
</view>

2. 子组件做数据接收并默认值

 properties: {
    title: {
      type: String,
      value: '默认标题'
    },content:{
      type:String,
      value:'默认内容'
    }
  },

3. 父组件使用子组件并传递值

<props-data />
<view class="styl">
  <props-data title="通信" content='组件通信-传递参数-动态数据' />
</view>
<props-data title="z组件传参" content='组件通信-传递参数-动态数据' />

组件传递样式 -externalClasses

• 在Component对象中，定义externalClasses属性
• 在组件内的wxml中使用externalClasses属性中的class
• 在页面中传入对应的class，并且给这个class设置样式
  
  自定义事件
  
  页面直接调用组件方法 相当于vue中ref
  • 可在父组件里调用 this.selectComponent ，获取子组件的实例对象。
  • 调用时需要传入一个匹配选择器 selector，
    

6.4 单个插槽的使用

• 组件的插槽也是为了让我们封装的组件更加具有扩展性

• 注意slot 不支持默认值 可以利用兄弟选中器解决

1. 子组件预留插槽

<view class="myslot">
  <view class="header">header</view>
  <!-- 小程序插槽不支持默认值 -->
  <view class="content">
    <slot></slot>
  </view>
  <view class="default">兄弟选择器解决默认值</view>
  <view class="footer">footer</view>
</view>

2. 父组件传递结构

<my-slot>
  <button>按钮</button>
</my-slot>
<my-slot>
  <button size="mini" type="primary">default样式</button>
</my-slot>
<my-slot>
</my-slot>

3. 兄弟选择器解决默认值问题

.default{
  display: none;
}
.content:empty + .default{
  display: block;
}

6.5 多个插槽的使用

1. 子组件预留插槽

<view class="slot">
  <view class="t">
    <text >上插槽</text> : 
     <slot name="t"></slot>
  </view>
  <view class="c">
    <text>中间插槽</text> : 
    <slot name="c"></slot>
  </view>
  <view class="b">
    <text>下插槽</text> : 
    <slot name="b"></slot>
  </view>
</view>

2. 允许可以定义多个插槽

Component({
  // 允许定义多个插槽
  options: {
    multipleSlots: true
  },
})

3. 父组件传递结构

<more-slot>
  <text slot="t">上插入</text>
  <text slot="c">中间插入</text>
  <text slot="b">下插入</text>
</more-slot>

6.6 混入

• behaviors 是用于组件间代码共享的特性，类似于Vue中的 “mixins”。
  • 每个 behavior 可以包含一组属性、数据、生命周期函数和方法；
  • 组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用；
  • 每个组件可以引用多个 behavior ，behavior 也可以引用其它 behavior ；
  • 文档参考

1. 编写混入

export const counterMinxin = Behavior({
  data: {
    counter: 100
  },
  methods: {
    add() {
      //  加一修改 ，不应该使用++，这会导致counter在修改this..data.counter也在修改
      this.setData({
        counter: this.data.counter + 1
      })
    }
  }
})

2. 使用

import { counterMinxin } from "../../behaviors/counter"
Component({
  behaviors: [counterMinxin],
})

6.7 组件生命周期

• 组件的的生命周期在 lifetimes 字段内进行声明
• 组件生命周期文档参考

Component({
  behaviors: [counterMinxin],
  lifetimes:{
    created(){
      console.log('组件被创建');
    },
    attached(){
      console.log('组件添加到dom树中');
    },
    detached(){
      console.log('组件被删除');
    }
  }
})

6.8 数据侦听

文档参考链接

七 .生命周期

7.1.应用生命周期

应用生命周期钩子函数

• 参数对象
  • 一般放在生命周期钩子函数的第一个参数。onLaunch钩子函数的参数对象为
    

7.2 页面生命周期

• 文档参考

 // 1. 页面路径 
 pages/index/index?id=10086&name='admin'
 // 2. onLoad 获取参数
 onLoad(query){}

7.3.组件生命周期

• 文档参考

八 . API解析

8.1网络请求

• 网络请求: wx.request(Object object)
• 官网参考

  wx.request({
      url: "api",
      data: {
        page: 1
      },
      success: res => {
        console.log(res);
      },
      fail: err => {}
    })

• 封装

//0. 封装成函数
export function hyRequest(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      ...options,
      success: res => {
        resolve(res.data)
      },
      fail: reject
    })
  })
}

//0. 类的方法封装
class hyService {
  request(options) {
    return new Promise((resolve, reject) => {
      wx.request({
        ...options,
        success: res => {
          resolve(res.data)
        },
        fail: reject
      })
    })
  }
  get(options) {
    return this.request({ ...options, method: 'GET'})
  }
  post(options) {
    return this.request({
      ...options,
      method: 'POST'
    })
  }
}
export const serviceResponse = new hyService()
// 1. 导入
import {hyRequest} from '../../service/request'
// 2. 使用封装调用api
  hyRequest({url:"http://123.207.32.32:1888/api/city/all"}).then(res=>{
      console.log(res);
    })

8.2 展示弹窗效果

• 具体配置参考

8.3 获取设备|位置信息

• 获取当前设备的信息，用于手机信息或者进行一些适配工作wx.getSystemInfo(Object object)
• 官网参考

• 获取用户的位置信息，以方便给用户提供相关的服务wx.getLocation(Object object)

reqInfo() {
    // 获取设备信息
    // 我们需要经常获取当前设备的信息，用于手机信息或者进行一些适配工作
    wx.getSystemInfo({
      success: arr => {
        console.log(arr);
      }
    }),
    wx.getLocation({
      success:err=>{
        console.log(err);
      }
    })
  }

• 注意获取位置信息需要相关权限
• 配置参考

 "permission": {
    "scope.userLocation": {
      "desc": "位置信息将用于小程序位置接口的效果展示"
    }
  }

8.4 Storage存储

• 同步存取数据的方法：
  • wx.setStorageSync(string key, any data)
  • wx.getStorageSync(string key)
  • wx.removeStorageSync(string key)
  • wx.clearStorageSync()
• 异步存储数据的方法：
  • wx.setStorage(Object object)
  • wx.getStorage(Object object)
  • wx.removeStorage(Object object)
  • wx.clearStorage(Object object)
• 具体使用参考

8.5 页面跳转

• 通过navigator组件 和 通过wx的API跳转
• 路由跳转参考配置
  
  页面跳转 - navigateTo
注意 跳转的页面是tarBar内的页面，需要使用wx.switchTab({})

 navigateTo() {
    // 跳转的页面是tarBar内的页面，需要使用wx.switchTab({}) 
    wx.navigateTo({
      // url: '/navPage/navigateTo/index',
      // 传参
      url: '/navPage/navigateTo/index?name=admin',
    })
  }

• 接受页面跳转的参数

Page({
  // options接受路径参数
  onLoad(options) {
    console.log(options);
  },
})

8.6 回退页面传参

• 主页面

Page({
  navigateTo() {
    // 方式二
    wx.navigateTo({
      url: '/navPage/navigateTo/index?name=admin',
      events: {
        backEvent(data) {
          console.log('接受跳转的参数', data);
        }
      }
    })
  }
})

• 跳转的页面

Page({
  up() {
    wx.navigateBack()
    // //  传递数据给上一级
    // const pages = getCurrentPages()
    // //读取最后一个页面,的实例
    // const prePage = pages[pages.length - 2]
    // // 设置上一个页面的数据
    // prePage.setData({
    //   message: 'admin'
    // })
    // console.log(pages);

    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('backEvent', {
      name: 'admin',
      pad: 'password'
    })
  },
  // 回退过多可以直接在onLoad里面设置
  onUnload() {
    const pages = getCurrentPages()
    const prePage = pages[pages.length - 2]
    prePage.setData({
      message: 'admin',
      username: 'password'
    })
  },
})

九 .登录流程

• 配置参考
  
  openid: 用户唯一标识
  session_key: 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        const code = res.code
        wx.request({
          url: 'url',
          data: {
            code
          },
          method: 'POST',
          success: res => {
            const token = res.data.token
            wx.setStorageSync('token', token)
          }
        })
      }
    })
  },
})

• 参考文章
  • 微信小程序开发（超详细保姆式教程）
  • coderwhy

十. 分包预下载

• 小程序要求压缩包体积不能大于2M，否则无法编译发布；
• 在实际项目中，体积大于2M时就需要通过分包机制进行发布上传；
• 对小程序进行分包，可以优化小程序首次启动的下载时间，因为分包后主包体积小了，有效提高用户体验；
• 将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载，提高了程序性能；
• 具体分包说明参考
• 分包预下载 通过在 app.json 增加 preloadRule 配置来控制

	"subPackages": [
		{
			"root": "pagesMember",
			"pages": [
				{
					"path": "setting/setting",
					"style": {
						"navigationBarTitleText": "设置"
					}
				}
			]
		}
	],
	// 预下载
	"preloadRule": {
		"pages/my/my": {   // 进入my主页 自动预下载pagesMember包
			"network": "all",
			"packages": [
				"pagesMember"
			]
		}
	}

文章来源地址https://www.toymoban.com/news/detail-668653.html

• 注意 同一个分包中的页面享有共同的预下载大小限额 2M，限额会在工具中打包时校验

到了这里，关于微信小程序（由浅到深）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！