目录

?️‍?开讲啦！！！！?️‍?苏州程序大白?️‍?

?博主介绍

? 个人主页:苏州程序大白
?作者介绍：中国DBA联盟(ACDU)成员，CSDN全国各地程序猿（媛）聚集地管理员。目前从事工业自动化软件开发工作。擅长C#、Java、机器视觉、底层算法等语言。2019年成立柒月软件工作室。
?如果文章对你有帮助，欢迎关注、点赞、收藏（一键三连）和C#、Halcon、python+opencv、VUE、各大公司面试等一些订阅专栏哦
? 有任何问题欢迎私信，看到会及时回复
? 微信号：stbsl6，微信公众号：苏州程序大白
? 想加入技术交流群的可以加我好友，群里会分享学习资料

?前言

?讲讲专享小程序有什么优势？

• 1、方便快捷：与其他购物平台的APP、网站相比，小程序有一个很大的优势——方便快捷。例如在使用其他购物平台的APP时，不仅需要下载、安装，而且还需要注册、登陆，操作步骤繁琐。即使不使用APP，直接登录购物平台的网站，也需要经过注册、登录的环节。但微信小程序不同，由于小程序是依附在微信上面使用的，因此无需下载和安装，此外，在登陆时，用户还可以选择在利用微信账号来登录小程序，一键登陆，操作简单、快捷。

• 2、入口众多：小程序商城本身作为小程序的一个种类，具有很多开放入口，比如：附近的小程序、小程序码、微信搜一搜、群分享、好友分享、公众号关联、推送等五十多个的入口。这些入口有助于企业更好的获取流量，从而进行转化、变现。

• 3、微信助力：相信大家都知道，小程序商城是基于微信运行的，这本身就是一个很大的优势。如果是运营一个购物商城的网站或是APP，首先要做到的就是有用户基数，而一个新平台，获取流量的难度是非常大的。但微信小程序，背靠微信，坐拥10亿用户，在这些用户中，一定会有很多有相关需求的用户。再加上附近的小程序、搜索发现小程序、公众号关联等，小程序可以非常轻松的获取到大量流量。

• 4、场景营销：上述提到，小程序拥有很多的入口，其中包括线上入口和线下入口，而小程序商城主要作为购物使用，所以，线下的入口很重要。小程序商城很多的使用频率都是线下，再加上其拥有的营销属性，使得很多的商家解决了很多业务上的难题，更是大大节省了人力、物力、财力等成本，很大的提升了店铺的业务效率。

• 5、开发成本低：企业进行微信小程序开发，既可以解决开发成本问题，又可以缩短开发周期，并且还可以利用微信已存在的营销趋势，用户可以通过扫描二维码进入。

?小程序文件分析

• 1、WXML WXSS JavaScript JSON。

• 2、page首页log日志。

• 3、顶部标题的颜色必须为block和white。

tabBar

表示地址的tab栏【官网地址】

注意事项

• 在使用bool类型 充当类型属性时，在属性值的位置前面不能加空格。

• 列表循环` wx:for=”数组或者对象”。

• 只有一层循环时可以将一下省略。

• 列表循环wx:for-item="循环项的名称"wx:for-index=’index’`。

• wx:key=”唯一的值”。

• 条件渲染wx:if wx:elif wx:else。

• hidden 是添加样式使用。

• 对象循环 wx:for="{{对象/数组}}" wx:for-item="对象的值" wx:for-index="循环项目的属性"。

<!--pages/demo/demo.wxml--><view>轮播图</view><!-- image width 700px height 277px   x/1 = 277/700   x=277/700--><swiper class="swiper" autoplay interval="1000" circular indicator-dots>  <swiper-item> <image mode="widthFix" src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/175759/5/697/309624/605fa953Eaddcc402/30b0ea12dc5cc42c.jpg!cr_1125x445_0_171!q70.jpg.dpg" alt=""/></swiper-item>  <swiper-item> <image mode="widthFix" src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/143564/28/18582/124317/60667523E2a4840dd/301bbb3de0243db8.jpg!q70.jpg.dpg" alt=""/></swiper-item>  <swiper-item> <image mode="widthFix" src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/155887/8/16711/104572/60534627Eb979dc75/cc416de39d2e83b0.jpg!cr_1125x445_0_171!q70.jpg.dpg" alt=""/></swiper-item></swiper><!-- 单选框 --><radio-group bindchange="bindChange">  <radio name="sex" value="male">男</radio>  <radio name="sex" value="female">女</radio>  <view wx:if="{{gerder == "male"}}">-您选择的按钮为男</view>  <view wx:elif="{{gerder == "female"}}">-您选择的按钮为女</view>  <view wx:else="{{gerder == ""}}">-您选择的按钮为</view></radio-group><!-- 复选框 --><view>  <checkbox-group bindchange="bandelItemchange">    <checkbox wx:for="{{fruit}}" wx:key="id" value="{{item.value}}">      {{item.name}}    </checkbox>    <view>选中的是：{{checkList}}</view></checkbox-group></view><!-- 组件 --><Tabs></Tabs><rich-text class="" nodes="{{html}}">  </rich-text>  <view>input标签</view><input type="text" bindinput="handleInput"/><view class="btn">  <button size="mini" bindtap="handeltap" data-opertation="1">+</button><button size="mini" bindtap="handeltap" data-opertation="{{-1}}">-</button></view><image mode="widthFix" src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/wallhaven-oxxw29.webp"></image><view>{{num}}</view><view>----------------------------</view><text>测试页面</text><view>"text"相当于web中的span元素，view相当于web中的div标签块级元素</view><view>测试wx:for标签</view><view>---------------------</view><view>列表循环</view><view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="username">  属性：{{item.id}}  索引: {{index}}  名称：{{item.name}}  年龄：{{item.age}}  年龄：{{item.msg.con}}</view><view>对象循环</view><view wx:for="{{msg}}" wx:for-item="value" wx:for-index="key" wx:key="id">  {{value}}  {{key}}</view><view>---------------------</view><view>测试 wx:if</view><view wx:if="{{false}}">1</view><view wx:elif="{{false}}">2</view><view wx:elif="{{true}}">3</view><view>---------------------</view><view>测试 hidden</view><view hidden="{{true}}">1</view><view hidden>1</view>

?事件绑定

1、nput标签绑定input事件 使用bindinput属性。

2、通过事件源对象来获取input输入的值 e.detail.value。

3、与data同级 并且可以将input中输入的值与data中定义的属性绑定，使用this.setData({属性:e.detail.value})。

4、加入一个点击事件 bindtap属性，无法直接传参 通过自定义属性的方法来传参。

• 在自定义属性时要注意 如果传递的参数为数字，应该加{{}}使得传递的参数为number，不加为string。

• 注意input输入后的值为字符型，需要将输入的值转换。

?图片问题

1、比例尺的关系 1px =750rpx*设置的尺寸大小/page的宽度。

2、text 才能实现长按复制selectable decode解码和复制。

3、image中属性mode aspectFit是长边能显示出来 aspecFill使得短边显示出来 widthFix按照比例缩放。

4、图片支持懒加载lazy-load 布尔值。

?轮播图swiper

1、轮播项swiper-item标签里面放入图片swiper 存在默认高度 150px。

2、高度无法实现由内容撑开。

3、图片使用mode=“widthFix”。

4、indicator-dots 显示面板指示点 indicator-color`` indicator-active-color。

5、autoplay自动轮播 5秒一次。

6、interval可以切换时间间隔。

7、circular 是否循环轮播。

8、给图片加100%宽度 ，swipter的高度自适应 100vw * 图片的宽度 / 高度。

navigator 导航

1、url 表示要跳转的页面路径。

2、相当于块级元素。

3、target 跳转小程序，默认当前小程序 可选值 self/minProgram。

4、open-type 跳转方式。

rich-text 富文本标签

1、nodes 接受字符串。

2、对象数组。

button标签

1、size属性 default/ mini。

2、open-type。

icon图标

1、type类型。

2、size 大小 默认23。

3、color 改变颜色。

radio/checkbox

• radio-ground 绑定change事件 bindchange。

• checkbox-ground绑定事件change。

?自定义组件

1、在使用自定义组件时 要注意 在使用函数方法时要写到methods中。

2、并且将被使用的组件写到需要渲染页面的json文件中。

3、父组件向子组件 传递数据 通过自定义属性来传递properties要接受的数据名称· type/value·类型和值。

4、子向父传递 this.triggerEvent("名称",传递的参数) 传递的时候要注意 传递的参数是什么形式，相对应。

5、子传父,在子中定义一个要传递的事件方法和参数，在父中对事件方法进行绑定，然后在父中使用方法。

6、数据在谁上，谁有权修改。

    handleitemtap(e){      // 将点击的事件加入自定义属性      // console.log(e);      const {index} = e.currentTarget.dataset      let {tabs} = this.data      // console.log(index);      // 对以上的导航数据使用foreach进行遍历      tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)      this.setData({        tabs      })    }-------------------<view class="nav">  <view bindtap="handleitemtap" wx:for="{{tabs}}" wx:key="id" class="title_item {{item.isActive?"active":""}}" data-index="{{index}}">{{item.name}}</view></view>

slot标签其实就是一个占位符，等到父组件调用子组件的时候，在传递标签。

?生命周期

// app.jsApp({  // 表示在应用第一次启用时就执行  onLaunch(e){    console.log(e);    console.log("launch");    // 不能触发    // wx.navigateTo({    //   url: "url",    // })  },  // 应用被用户看到时执行  onShow(e){    // 对数据的重置    console.log("onshow");  },  // 应用被隐藏的时候所执行的  onHide(e){    // 清除定时器    console.log("onHide");  },  // 应用发生错误时执行  onError(err){    console.log("onError");     // console.log(err);  },  // 应用找不到页面时触发  onPageNotFound(e){    // 无法跳转到tabbar页面，如果页面不存在可以重定向到第二个页面    console.log("onPageNotFound");    wx.navigateTo({      url: "/pages/demo/demo",    })  }})

?页面生命周期

?项目制作

promise封装函数

export const request=(params)=>{    return new Promise((resolve,reject)=>{        wx.request({          ...params,          success:(result)=>{              resolve(result)          },          fail:(err)=>{              reject(err)          }        });              })}request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"})    .then(result=>{      this.setData({            swiper_list: result.data.message          })    })

?缓冲事件

1、设置一个缓冲事件，获取本地的存储中的数据进行判断。

2、·{time:Date.now(),data:[...]}。

3、web: localStorage.setItem("key","value") localStorage.getItem("key")。

4、优化接口的路径 使用prominse中的params将url解构出来。

?es7 async语法

• 解决回溯的最终方案。

• async。

?触底事件

1、onReachBottom 页面触底事件。

2、页面上拉触底事件的处理函数。触底事件，当页面触底之后，在进行请求，并且将请求到的数据在追加到原来的数组中，并且在触底后还要进行判断如果总数据的页数>=当前的页数，要返回wxwx.showToast({title: ‘title’,}),否则继续请求。

// pages/goods_list/goods_list.jsimport { request } from "../../request/index.js";Page({  /**   * 页面的初始数据   */  data: {    // 将这些数据导入到子文件中    tabs: [{        id: 0,        value: "综合",        isActive: true      },      {        id: 1,        value: "销量",        isActive: false      },      {        id: 2,        value: "价格",        isActive: false      }    ],    first_list:[],  },    // 设置请求后返回的总页面的数量  totalpages:1,  handleChage(e){    // console.log(e);    // 将子传递给父亲的索引值解构出来    const {id} = e.detail    // 将父亲data的数据进行解构    let {tabs} = this.data    // 将data中的数据进行遍历 如果此时的索引值等于数据中的id值则将数据中的isActive的值改为true    // 这里的v表示的是遍历的数据，i表示的是索引号    tabs.forEach((v,i) =>i===id?v.isActive=true:v.isActive=false);    // 将这里修改的数据加到源数据中    this.setData({      tabs    })  },  // 页面触底事件  pageParams:{    query:"",    cid:"",    pagenum:1,    pagesize:10  },  // 对接口数据进行请求  async getgoodList(e){    const res = await request({      url:"/goods/search",      data: this.pageParams    })    console.log(res);    // 先获取页面的总数据，计算出页码信息    const goodspages = Math.ceil(res.data.message.total / this.pageParams.pagesize)    console.log(goodspages)    this.totalpages = goodspages    this.setData({      // 这一步是将请求到的数据在使用数组拼接的方式拼接起来，这里用到了数组解构的方法      first_list:[...this.data.first_list,...res.data.message.goods],    })  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    // console.log(options);    this.pageParams.cid = options.cat_id    this.getgoodList()  },    /**   * 页面上拉触底事件的处理函数。触底事件，当页面触底之后，在进行请求，并且将请求到的数据在追加到原来的数组中，并且在触底后还要进行判断如果总数据的页数>=当前的页数，要返回wxwx.showToast({title: "title",}),否则继续请求   */  onReachBottom: function () {    this.pageParams.pagenum++;    // 进行页面触底的判断    if(this.totalpages<=this.pageParams.pagenum){      wx.showToast({        title: "页面加载完成",      })    }else{      this.getgoodList()    }      },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function () {  },  /**   * 生命周期函数--监听页面显示   */  onShow: function () {  },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function () {  },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function () {  },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {