快速掌握微信小程序，知道这几点就够了！

注：具体应以官方文档为准。

UploadTask | 微信开放文档

（切记多查文档！！！！！）

目录

全局配置

wxml

js相关​编辑

api本地存储

​编辑

API特征

生命周期

页面生命周期

应用生命周期

分包：

分包预加载：

 自定义组件

组件样式

slot插槽

__wxConfig

纯数据

setData

微信小程序常用功能：

表单校验

上传昵称、头像

调用腾讯地图获取位置！！！

---

全局配置

"pages" 内写页面，"entryPagePath" 进入页面配置，“window”写头部navigation的配置，“tabBar”底部导航栏配置，navigationStyle: "custom" 自定义头部导航栏

{
  "pages":[
    "pages/sassTest/sassTest",
    "pages/practiseDemo/practiseDemo",
    "pages/scrollView/scrollView",
    "pages/pickerPra/pickerPra",
    "pages/picker/picker",
    "pages/form/form",
    "pages/login/login",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "entryPagePath":  "pages/index/index",
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#ec9bad",
    "navigationBarTitleText": "ayu的小世界",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/static/tabbar/home-default.png",
      "selectedIconPath": "/static/tabbar/home-active.png"
    },
    {
      "pagePath": "pages/login/login",
      "text": "登录",
      "iconPath": "/static/tabbar/face-default.png",
      "selectedIconPath": "/static/tabbar/face-active.png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "/static/tabbar/logs-default.png",
      "selectedIconPath": "/static/tabbar/logs-active.png"
    }
  ],
  "selectedColor": "#ec9bad",
  "color": "#999",
  "borderStyle": "white"
  },

  "style": "v2",
  "sitemapLocation": "sitemap.json"
  "navigationStyle": "custom"
}

wxml

包括图片滚动，默认跳转，picker使用，

srcoll-view组件【组件/视图组件】【refresher-enable实现必须开启才能使用其身上的api】

 

<view class="custom-navigation">
  ayu的小世界
</view>

<!-- 图片滚动 -->
<swiper indicator-dots autoplay circular class="swiper">
  <swiper-item>
    <image src="/static/uploads/slide_1.jpg" mode=""/>
  </swiper-item>
  <swiper-item>
    <image src="/static/uploads/slide_2.jpg" mode=""/>
  </swiper-item>
  <swiper-item>
    <image src="/static/uploads/slide_3.jpg" mode=""/>
  </swiper-item>
  <swiper-item>
    <image src="/static/uploads/slide_4.jpg" mode=""/>
  </swiper-item>
  <swiper-item>
    <image src="/static/uploads/slide_5.jpg" mode=""/>
  </swiper-item>
</swiper>

<view class="list">
  <view class="jx active">精选</view>
  <view class="sj">手机</view>
  <view class="sp">食品</view>
  <view class="ny">内衣</view>
</view>

<view>{{ msg }} </view>
<button bind:tap="changeData">按钮</button>
<navigator url="/pages/login/login">跳转</navigator>


<!-- 默认跳转非tabbar用open-type="switchTab" -->
<navigator open-type="switchTab" hover-class="navActive" url="/pages/login/login">跳转到登录</navigator>
<navigator url="" open-type="switchTab" hover-class="none"></navigator>

<!-- 图片使用，mode 为图片的显示大小，用aspectFill 最好 -->
<image src="/static/uploads/goods_2.jpg" mode="scaleToFill" />
<image src="/static/uploads/goods_2.jpg" mode="aspectFit"/>
<image src="/static/uploads/goods_2.jpg" mode="aspectFill"/>


<!-- 密码输入框 -->
<view class="inputPwd">
  <input type="password" type="text" placeholder="请输入密码"/>
</view>

<!-- 单选框 -->
<radio-group bindchange="">
  <radio value="true"/>lili
  <radio value="false" checked />erere
</radio-group>

<!-- 复选框 -->
<checkbox-group bindchange="">
  <checkbox value="li"/> ll
  <checkbox value="jsy"/> jsy
  <checkbox value="pl"/> pl
</checkbox-group>

<!-- 日期 -->
<picker mode="date">
  
</picker>

<!-- 地区  -->
<picker mode="region">
  
</picker>

<!-- 时间 -->
<picker mode="time">
  
</picker>




<!-- 块区滚动 --> 
<scroll-view class="aside" scroll-y 
  refresher-enabled 
  refresher-triggered="{{isLoading}}" bindrefresherrefresh="refresh">

</scroll-view>

在请求发回之后，设置isLoading: false

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isLoading: false
  },
  refresh(){
    setTimeout(()=>{
      this.setData({
        isLoading: false
      })
      console.log(1111);
    },1000)  

  }
})

js相关

 循环中，默认的 index item 

wx:key 只能取值：item中的属性，或者 *this(简单类型用这个)

多重循环要使用

wx:for-index 自定义访问数组 索引值 的变量

wx:for-item 自定义访问数组 单元值 的变量

model:value 实现数据的双向绑定（ 仅仅支持 input 与 textarea 组件使用）

api本地存储

不记得直接查文档就行。

API特征

注意： 异步api，留意是否为Promise( promise 支持链式调用) 

生命周期

多看官方文档描述，此处只是简单的记录。小程序的生命周期，分为两类。

页面生命周期

• onLoad 在页面加载完成时执行，只会执行 1 次，常用于获取地址参数和网络请求

• onShow 在页面处于可见状态时执行，常用于动态更新数据或状态

• onReady 在页面初次渲染完成时执行，只会执行 1 次，常用于节点操作或动画交互等场景

• onHide 在页面处于不见状态时执行，常用于销毁长时间运行的任务，如定时器

应用生命周期

• onLaunch 小程序启动时执行1次，常用于获取场景值或者启动时的一些参数（如自定义分享）

• onShow 小程序前台运行时执行，常用于更新数据或状态

• onHide 小程序后台运行时执地，常用于销毁长时间运行的任务，如定时器

页面中的钩子： 

初次渲染时onLoad(一次) ------- tabBar 有缓存只执行一次，普通页面没有缓存，回退时还要执行这个

分包：

对小程序进行分包，主要是为了优化小程序首次启动速度，初衷时按需加载。

使用分包： packPackages: [] 内的 root 属性为分包的根目录与分包名， pages属性为分包包含的页面。

分包预加载：

在进入小程序之后，根据当前页面用户可能跳转的页面，进行对应的分包预加载，用来进一步提升小程序的使用体验。通过在json文件的preloadrule 中配置预加载规则，键（触发页面路径），值（规则）

对象属性名： 加载页面时预加载配置的分包

其对应的对象属性： network: 什么网络环境下预加载

packages: 预加载哪些分包

 自定义组件

配置

右键创建组件，起名，在app.json/或者页面中的json中配置

在

  "usingComponents": {
    "navbar": "/components/navbar/navbar"
  }

 然后在wxml使用。

组件通讯

属性绑定：用于父传子，设置数据

使用方式：

子组件的js my-comp

Component({

 properties: {

    count: {
       type: Number,
       value: 333
 }

})


// 子组件 wxml
<text> 子组件 {{ count }} </text>

父组件wxml
<my-comp count="{{count}}"></my-comp>

js

Page({
 data: {
    count: 12
    }

})

事件绑定：用于子传父，传任意数据

子组件的js my-comp

Component({

 properties: {

    count: {
       type: Number,
       value: 333
     },
    
}
methods: {
    addCount(){
        this.setData({
         count : this.properties.count + 1
        })

        // 这里改变了count ,如果要让父组件值也一起改变，需要借助 this.triggerEvent
        this.triggerEvent('log', count: this.properties.count)   // 前面是写在父组件的 那个 bind: log 里的log ,这个log是自定义的
        
    }
}
)


// 子组件 wxml
<text > 子组件 {{ count }} </text>
<button bindtap = "addCount"> 按钮 </button>

父组件wxml
<my-comp count="{{count}}" bind:log="logWords"></my-comp>

js

Page({
 data: {
    count: 12
},
logWords(e){
    console.log(e.detail.count) // 在这里可以拿到到子组件传过来的值
    this.setData({
        count: e.detail.count
    })
}
})

获取组件实例

？？（以后补充）

组件样式

在该组件的js页面加配置

Component({
  options: {
    addGlobalClass: true,
  },
  // 开发自定义的样式类
  externalClasses: ['custom-class', 'title-class']
})

组件代码：

<view class="navigation-bar custom-class">
  <view class="navigation-bar-title title-class">
    自定义标题
  </view>
</view>

引用组件的代码：

<navigation-bar
  custom-class="my-navigation-bar" 
  title-class="my-navigation-bar-title"
></navigation-bar>

slot插槽

和vue类似，但是多个插槽要在组件js上配置。

name 为不同的 <slot /> 命名来区分不同的插槽。

options: { multipleSlots: true }

代码：

组件内代码

<view>
  <view class="slotStyle">
    <slot name="first"></slot>
  </view>
 <view class="secondSlot">
  <slot name="second"></slot>
 </view>
</view>

<xiaosi>
  <view slot="first">
    <text>第一次啦啦啦啦</text>
  </view>
  <view slot="second">
    <text>111111</text>
  </view>
</xiaosi>

__wxConfig

(文档上已经找不到了，虽然还可使用，但我怀疑之后会弃用！！所以，谨慎使用)

获取微信全局的配置（app.json）

控制台打印：

 应用：可以用来获取 tabBar 页面，知晓页面是tabBar还是非tabBar.

wx.redirectTo  只能跳转普通页面，不能跳转tabBar页面

wx.switchTab 只能跳转tabBar页面，不能跳转普通页面

// 返回一个只有path 的数组
const list = __wxConfig.tabBar.list.map(v => v.pagePath.slice(0,-5))

// _redirectURL内为要跳转的路径，当该路径判断为tabBar
if(list.includes(this.data._redirectURL)){
 wx.switchTab({url: '/'+ this.data._redirectURL})
}else{
 wx.redirectTo({url: '/'+ this.data._redirectURL})
}

纯数据

setData 应只用来进行渲染相关的数据更新。用 setData 的方式更新渲染无关的字段，会触发额外的渲染流程，或者增加传输的数据量，影响渲染耗时。页面或组件渲染间接相关的数据可以设置为「纯数据字段」，可以使用 setData 设置并使用 observers 监听变化；

纯数据字段不会被应用到 WXML 上

使用：

page({
 options: {
    pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
  },
 data: {
    _b: '',  // 这就是纯数据字段
    
 }
})

setData

这是在微信小程序中特别重要的一个修改数据的方法。

记住几句话：

• 如果Page对象的data中没有定义该key，则setData自动创建；如有则修改data中原变量的值。
• key可以以数据路径的形式给出
• key值可以为变量，为变量的时候要用[ ]引起来

 

 上面均引用自下面链接内文章，有兴趣大家可以去看看。

其他注意事项：微信小程序：setData方法详解和注意事项-腾讯云开发者社区-腾讯云

微信小程序常用功能：

表单校验

由于微信小程序并没有提供像vue2,vue3那样方便的 validate() 之类的API,所以，我们会在这里用到一个npm包。

包地址：wechat-validate - npm

npm i wechat-validate

包下有具体使用方法，记得下载完包之后，还需要构建一下。

下完之后可以，就可以像vue中一样，使用表单校验功能了。

上传昵称、头像

调用腾讯地图获取位置！！！