【9】微信小程序开发

 以下为最近学习微信小程序的手账记录，目前还在学，

待整个学完做完一个项目后来整理全篇。

常用热键：

1、自动代码重置格式

shift+alt+F

2、同时编辑多行代码

shift+alt+上下方向键

3填写多行注释

shift+alt+a

其它快捷键 

快捷键

Ctrl+S：保存文件
Ctrl+【， Ctrl+】：代码行缩进
Ctrl+Shift+【， Ctrl+Shift+】：折叠打开代码块
Ctrl+C Ctrl+V：复制粘贴，如果没有选中任何文字则复制粘贴一行
Shift+Alt+F：代码格式化
Alt+Up，Alt+Down：上下移动一行
Shift+Alt+Up，Shift+Alt+Down：向上向下复制一行
Ctrl+Shift+Enter：在当前行上方插入一行

Ctrl+End：移动到文件结尾
Ctrl+Home：移动到文件开头
Ctrl+i：选中当前行
Shift+End：选择从光标到行尾
Shift+Home：选择从行首到光标处
Ctrl+Shift+L：选中所有匹配
Ctrl+D：选中匹配
Ctrl+U：光标回退 

上传图片代码：

imglist.forEach((v, i) => {
      wx.uploadFile({
        // 图片上传到的位置
        url: 'https://img.coolcr.cn/api/upload',
        // 被上传的文件的路径
        filePath: v,
        // 上传的文件的名称 后台来获取文件 file
        name: "image",
        // 顺带的文本信息
        formData: {},
        success:(result)=>{
          console.log(result);
          let url=JSON.parse (result.data).data.url;
          this.UpLoadImgs.push(url);
          console.log(this.UpLoadImgs);
        }
      })
    })

 

1、注册开发账号

点击以下的官网

微信公众平台

用自己的邮箱注册之后，登录账号进行填写个人信息

上传微信小程序的图标，名称，简介等信息

然后可以选择添加开发人员

2、下载开发工具

点击文档-->工具

点击蓝字查看版本

 选择自己电脑适应的版本

3、创建项目

输入自己的appid号（这个账号在小程序网页管理页面的设置里面）

 然后填写项目路径文件夹创建项目

 4、项目结构

官方开发指南

微信开放文档 (qq.com)

5

1、tabBar

全局配置 | 微信开放文档 (qq.com)

tabBar是底部选项卡 

 示例代码：

{
  "pages": ["pages/index/index", "pages/logs/index"],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
}

效果：

2、iconpath与selected_icon_path  (底部菜单的选中图标)

5、开发工具的快捷键

快捷键 | 微信开放文档 (qq.com)

页面配置

可以自定义在组件中设置一些配置

 单独配置每个页面的标题和背景颜色

sitmap

text标签相当于span 不会换行

view相当于div 会换行

标签中直接用双层话口号渲染 类似于vue

可以以对象的形式传值，类似vue

checkbox 类似于复选框 checked属性为选中效果

传boolean值时候 或者其他时候 一定注意字符串和花括号之间一定不要有空格

可以在花括号中加入语句 但是不能加入表达式 与vue类似

列表循环 

1、格式：wx：for=“{{数组或者对象}}”

2、wx：for-item=“循环项的名称”

3、wx：for-index=“循环项的索引”

更高效率的渲染方式 ：wx：key

不过有约束  

 比如只有一个id 只有一个name 等唯一的属性

wx：key=“*this”

表示这个是一个普通的数组

如以下形式:[1,2,3,44,5] 和["1","44","abbs"]这种的

双层循环

block

1、占位符的标签

2、写代码的时候 可以看到这标签存在，页面渲染 小程序会把它移除掉

需求场景 在你想要渲染某些数据 不想要额外写一层外面的标签 就可以使用block占位

条件渲染：

1、wx：if

2、hidden

格式：

组合

wx：if="{{true/false}}"
wx：elif="{{true}}"
wx：else="{{false}}"

hidden

 hidden标签显示隐藏是通过添加样式的方式来实现的（通过更改display为none来作用 所以如果标签中有display属性的代码 可能会覆盖hidden属性 使得标签隐藏效果失效）

inputs 输入框 当输入值发生变化时触发事件

使用格式关键字：bindinput

 和vue类似 在与data同级写相关的函数

通过事件源对象来获取

e.detail.value

把输入值的值 赋值到data当中 

  不能直接this.data.num=e.detail.value

vue中的写法 this.num=e.detail.value也不对

正确的写法：

   this.setData({

         num:e.detail.value

})

由此完成简单的数据双向绑定

事件绑定 bindtap 

无法在小程序的事件中直接传参

通过自定义属性的方式来传递参数

事件源中获取自定义属性

750rpx=375px

一个像素等于两个rpx

小程序中不需要主动引入样式文件

需要把页面中的某些元素的单位由px改成rpx或者百分比 （因为px是写死的）

引入阿里图标 iconfont-阿里巴巴矢量图标库

首先搜索，然后加入购物车

在购车里查看所有要用的图标 并点击新建项目

 然后在我项目里查看 并且生成链接

 

 点击链接跳转代码网页

 全选复制所有代码 在项目里新建style文件夹下wxss文件

 把刚才复制的代码黏贴进去

使用：

只需在全局里面引入这个样式文件

@import "./styles/iconfont.wxss";

 然后以类的名称形式（class="iconfont icon-sousuo"）使用

 效果：

第三方框架：

1、腾讯 wepy

2、美团 mpvue

3、京东 taro 语法类似react

4、滴滴 chameleon

5、uni-app

样式：

微信小程序里面不支持通配符

*{  }

用属性标签来写

在wxss中支持定义变量  

就可以在分页中使用主题颜色了

 效果：

声明组件并且引用 在哪个组件生命就在哪个组件引用

格式在需要引用的页面（json）里的usingComponents里面添加

左边组件名：右边路径（这里写的相对路径）

 注意这里写错了 最后不能有.js

然后我们再在这个组件里面实现搜索输入

使用less编译成wxss文件

(131条消息) 微信开发者工具中使用less生成wxss_微信开发者工具less变成wxss_梁小茹的博客-CSDN博客

当然也可以选择用继承在原生工具里面写

搜索框的样式代码：

/* components/searchinput/searchinput.wxss */
.searchinput{
  height: 90rpx;
  padding: 10rpx;
  background-color: var(--themeColor);


  }
    /* 伸缩盒子 并让文字垂直居中 */
   .searchinput>navigator{
     height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      border-radius: 15rpx;
      color: #666;
}

效果：

小程序中缓存与浏览器中缓存的区别

公共URL前缀更改

获取当前循环项的index 

1、首先在循环标签中定义点击事件，并且设置循环的data-index赋值

data-index="{{index}}"

 2、编辑点击事件

用这句话就可以获取index，并且根据当前index进行操作了

  const index=e.currentTarget.dataset.index;

 我们可以从控制台查看 获取的当前循环index

switchTab redictTo用于跳转是tabbar的页面

navigateTo跳转不是tarBar内的页面：

(131条消息) 微信小程序报错：navigateTo:fail can not navigateTo a tabbar page的解决方法_zkw_1998的博客-CSDN博客

购物车添加逻辑

every方法

订单：

封装后的request请求

request({
      url: '/getRightMenu',
      data:{pageNum,pageSize,index}
    })
    .then(result => {
    
      if(result.data.code=='200'){
       
 
    }else{
      console.log("分类页右侧商品数据请求发生错误");
    }
    })