小程序笔记1

1：项目初始化
1.1：创建项目与项目初始化
a：创建项目
在微信开发者⼯具的开始界⾯左侧检查项⽬类型，需要为 [⼩程序]。
然后在右侧点击 [+] 开始新建项⽬。
最后在弹出的界⾯中输⼊项⽬相关的信息，点击确定即可。

b：项⽬初始化
（1）重置 app.js 中的代码。

（2） 删除 app.json 中 pages 下的 "rendererOptions" 以及 "componentFramework" 字段。
（3）删除 app.wxss 中的代码。
（4）删除 app.json 中 pages 下的 "pages/logs/logs" 路径，同时删除 pages/logs ⽂件夹。
（5）删除 components 中的⾃定义组件。
（6）重置 pages/index ⽂件夹下的 index.js 、 index.wxss 、 index.html 以及 index.json ⽂件。
（7）更新 utils 下 util.js 的⽂件名为 formatTime.js。
1.2：⾃定义构建 npm + 集成Sass
随着项⽬的功能越来越多、项⽬越来越复杂，⽂件⽬录也变的很繁琐，为了⽅便进⾏项⽬的开发，开发
⼈员通常会对⽬录结构进⾏调整优化，在慕尚花坊项⽬中， 我们就需要将⼩程序源码放到
miniprogram ⽬录下 。

a：⾃定义构建
（1）⾸先在project.config.json 配置 miniprogramRoot 选项，指定⼩程序源码的⽬录。

（2）然后配置 project.config.json 的 setting.packNpmManually 为 true。

（3）初始化项⽬。

（4）终端中输入  npm init -y
（5）最后配置 project.config.json 的 setting.packNpmRelationList 项，指定 packageJsonPath 和
miniprogramNpmDistDir 的位置。

（6）安装 vant ，然后进⾏ npm 构建 ，测试是否能够正常 vant 构建成功。
         输入  npm i @vant/weapp
（7）“⼯具”-“构建npm”。
b：集成 Sass
（1）在 project.config.json ⽂件中，修改 setting 下的 useCompilerPlugins 字段为 ["sass"] ，即可开 启⼯具内置的 sass 编译插件。

（2）更改wxss后缀名为sass
三：构建项⽬⻚⾯

 

1.1.1navigator
navigator是一个全局对象，它提供了与浏览器相关的信息和操作接口。在前端开发中，我们通常会使用 navigator 对象来获取用户浏览器的相关信息。
navigator 对象的常见属性和方法包括：
navigator.userAgent: 返回当前浏览器的用户代理字符串。
navigator.appName: 返回当前浏览器的名称。
navigator.appVersion: 返回当前浏览器的版本号。
navigator.language: 返回当前浏览器的语言设置。
navigator.platform: 返回当前浏览器所在设备的操作系统平台。
navigator.geolocation: 提供了一组 API，用于获取当前设备的地理位置信息。
navigator.mediaDevices: 提供了一组 API，用于访问当前设备的音频、视频、屏幕等媒体设备。
navigator.serviceWorker: 提供了一组 API，用于在浏览器中注册和管理 Service Worker，实现离

1.2首页背景图 

.index-container{
 
  //首页背景图
.window-bgc{
  height: 200rpx;
  position:absolute;
  width:100%;
  background-color: #f3514f;
  border-radius:0rpx 0rpx 40% 40%;
}
 
.adver {
  display: flex;
  margin:0 auto;
  width: 96%;
  padding: 18rpx;
  box-sizing: border-box;
  background-color:rgb(177, 54, 54);
  border-radius: 18rpx;
 
  .adver-left{
    width: 50%;
    padding: 8rpx 8rpx 0rpx 8rpx;
  }
  .adver-right{
    width: 50%;
    padding: 8rpx 8rpx 0rpx 6rpx;
 
    view:laat-child{
      padding-top: 10rpx;
    }
  }
 
  image{
    width: 100%;
  }
}
 
 
}

1.1.1  wx:for嵌套
wx:for 是用来做列表渲染，在组件上使用wx:for绑定一个数组，数组的下标变量名默认为index,数组当前项的变量名默认为item.

1.1.2  wx:key遍历数组
wx：key 提升性能。 

wx：key 属性值有两种添加属性。 

1. 字符串，需要是遍历的数组中 item 的某个属性，要求该属性是列表中唯一的字符串或者数字，不能进行动态改变。 

2. 保留关键字 *this ，*this代表的是 item 本身，item 本身是唯一的字符串或者数

                    

1.2.1 margin和padding的使用（内外边距）
外边距（margin）：

外边距定义了元素与其周围元素之间的空白区域。
外边距可以设置为正值、负值或百分比。
外边距可以用来控制元素之间的间距、对齐元素、扩展元素的可点击区域等。
外边距不会影响元素的背景颜色或边框。

内边距（padding）：

内边距定义了元素的内容与其边框之间的空白区域。
内边距可以设置为正值、负值或百分比。
内边距可以用来控制元素内容与边框之间的间距、增加元素的可点击区域等。
内边距会影响元素的背景颜色。
在CSS中，可以使用以下属性来控制外边距和内边距：

外边距属性：

margin-top：顶部外边距
margin-right：右侧外边距
margin-bottom：底部外边距
margin-left：左侧外边距

内边距属性：

padding-top：顶部内边距
padding-right：右侧内边距
padding-bottom：底部内边距
padding-left：左侧内边距

这些属性可以接受不同的值，例如像素（px）、百分比（%）、em等

1.2.2  justify-content
justify-content 属性：设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,

justify-content: flex-start; 默认值，主轴顶端对齐

justify-content: flex-end; 主轴的末端对齐

justify-content: center; 居中对齐，子元素位于弹性容器的中心

justify-content: space-between; 两端对齐，子元素和子元素之间有空白空间,项目之间的间隔都相等。

justify-content: space-around; 子元素之前、之间、之后都留有空白空间，且空间自行分配,项目之间的间隔比项目与边框的间隔大一倍。

space-evenly:弹性项目平均分布在该行上,相邻项目的间隔，项目与容器之间空间相等

效果图

<view class="index-container">
 
  <!-- 首页背景图 -->
  <view class="window-bgc"></view>
 
  <!-- 页面主体部分 -->
  <view class="container">
    <!-- 轮播图区域 -->
    <banner />
 
 
    <!-- 导航区域 -->
    <entrance />
    <!-- 广告区域 -->
    <view class="adver">
      <view class="adver-left">
      <navigator url="">
        <image src="../../assets/images/love.jpg" mode="widthFix" />
      </navigator>
    </view>
    <view class="adver-right">
    <view>
    <navigator url="">
      <image src="../../assets/images/elder.jpg" mode="widthFix" />
    </navigator>
  </view>
  <view>
    <navigator url="">
      <image src="../../assets/images/friend.jpg" mode="widthFix" />
    </navigator>
  </view>
</view>
</view>
 
<!-- 商品列表 -->
<goods-list title="人气推荐"/>
<goods-list title="猜我喜欢"/>
<goods-card/>
</view>
 
 
 
</view>

   1.3 banner组件

 

Properties

(1)Properties类是专门用于读写配置文件的集合类

(2)配置文件的后缀名为.properties

(3)Properties类的方法可查找api文件

banner.json

1.4轮播图组件

在banner.wxml中通过swiper组件建立一个自动轮播列表

使用wx:for循环遍历bannerList数组

bannerList.length为数组长度

<view class="swiperbox">
 <swiper autoplay class="swiper" indicator-active-color="#FF734C" interval="2000" duration="1000" indicator-color="rgba(0,0,0,3)">
 <block wx:for="{{ bannerList }}" wx:key="index">
 <swiper-item class="swiper-item">
   <image class="img" src="{{item}}"></image>
 </swiper-item>
   
 </block>
   
 </swiper>
 <view class="indicator">
 <text wx:for="{{bannerList.length}}" wx:key="id"
 class="rectangle"></text>
 </view>
 
 
</view>

 设置swiperbox样式

.swiperbox{
  position: relative;
  .swiper{
    height: 320rpx;
    //设置圆角弧度
    border-radius: 18rpx;
    //设置溢出隐藏
    overflow: hidden;
    width: 95%;
    //margin设置外边距
    margin: 0 auto;
  }
  .swiper-item{
    .img{
      width: 100%;
      height: 100%;
      border-radius: 18rpx;
    }
  }
 
  .indicator{
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 16rpx;
    left: 0rpx;
    right: 0rpx;
    .rectangle{
      width: 30rpx;
      height: 6rpx;
      background-color: #f3514f;
      margin: 0 8rpx;
      border-radius: 6rpx;
    }
  }
}

导航分类样式

.nav-list {
  //设置弹性布局
  display: flex;
  //设置换行
  flex-wrap: wrap;
  margin: 20rpx;
  border-radius: 18rpx;
  padding: 10px 0px 10px 10px;
  background-color: white;
}
 
.nav-item {
  .navigator-nav {
    //更改主轴方向
    //由默认的横向排列更改为纵向排列
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    margin-top: 10px;
 
    .nav-text {
      margin-top: 4px;
      font-size: 12px;
    }
 
    .nav-img {
      width: 66rpx;
      height: 66rpx;
    }
  }
} 

模块对话框封装

wx.showModal() 模态对话框也是在项⽬中频繁使⽤的⼀个⼩程序 API ，通常⽤于向⽤户询问是否执

⾏⼀些操作，例如：询问⽤户是否真的需要退出、是否确认删除等等。

1
wx.showModal(
2 title: '提示', // 提示的标题
3 content: '您确定执⾏该操作吗？', // 提示的内容
4 confirmColor: '#f3514f',
5 // 接⼝调⽤结束的回调函数（调⽤成功、失败都会执⾏）
6 complete({ confirm, cancel }) {
7 confirm && console.log('点击了确定')
8 cancel && console.log('点击了取消')
9 }
10 })

：封装思路
a：对 wx.showModal() ⽅法进⾏封装， 封装后的新⽅法叫 modal。
b：调⽤该⽅法时，传递对象作为参数，对象的参数同 wx.showModal() 参数⼀致。
c：封装的 modal ⽅法的内部通过 Promise 返回⽤户执⾏的操作(确定和取消，都通过 resolve 返
回)。
d：在需要显示模态对话框的时候调⽤ modal ⽅法，并传⼊相关的参数，有三种调⽤⽅式：
不传递参数，使⽤默认参数。
传递参数，覆盖默认的参数
3：调⽤⽅式
新封装的本地存储模块，我们依然希望有两种调⽤的⽅式：
a：模块化的⽅式导⼊使⽤
b：将封装的模块挂载到 wx 全局对象身上
4：实现步骤：
a：在 extendApi.js ⽂件中新建 modal ⽅法，⽅法内部

b：modal ⽅法，⽅法内部⽤来处理封装的逻辑
 

  5：代码实现   

1 // exendApi.js
2
3 // function toast () {}
4
5 // 在调⽤modal⽅法时，可以传递参数，也可以不传递参数。
6 // 如果不传递参数，默认值就是空对象。
7 // 如果传递参数，参数需要时⼀个对象，对象中的属性需要和wx.showModal参数保持⼀致。
8 const modal = (options = {}) => {
9 // 在⽅法内部需要通过Promise返回⽤户的操作
10 // 如果⽤户点击了确认，需要通过resolve返回true
11 // 如果⽤户点击了取消，需要通过resolve返回false
12
13 return new Promise((resolve) => {
14 // 默认的参数
15 const defaultOpt = {
16 title: '提示', // 提示的标题
17 content: '您确定执⾏该操作吗？', // 提示的内容
18 confirmColor: '#f3514f',
19 // 接⼝调⽤结束的回调函数（调⽤成功、失败都会执⾏）
20 complete({ confirm, cancel }) {
21 confirm && console.log('点击了确定')
22 cancel && console.log('点击了取消')
23 }
24 }
25
26 // 通过object.assgin⽅法将参数进⾏合并
27 // 需要使⽤传⼊的参数覆盖默认的参数
28 // 为了不影响默认的参数，需要将合并以后的参数赋值给⼀个空对象
29 const opts = Object.assign({}, defaultOpt, options)
30
31 wx.showModal({
32 // 将合并以后的参数通过展开运算符赋值给wx.showModal对象
33 ...opts,
34 complete({ confirm, cancel }) {
35 // 如果⽤户点击了确定，通过 resolve 抛出 true
36 // 如果⽤户点击了取消，通过 resolve 抛出 false
37 confirm && resolve(true)
38 cancel && resolve(false)
39 }
40 })
41 })
42 }
43
44 export { modal }
45
46 wx.modal = modal
47
1 // app.js
2
3 // app.js
4 // import { toast } from './utils/extendApi'
5 import './utils/extendApi'
6
7 App({
8 // ⻚⾯显示⽣命周期函数
9 async onShow() {
10
11 // wx.showModal({
12 // title: '提示', // 提示的标题
13 // content: '您确定执⾏该操作吗？', // 提示的内容
14 // confirmColor: '#f3514f',
15 // // 接⼝调⽤结束的回调函数（调⽤成功、失败都会执⾏）
16 // complete({ confirm, cancel }) {
17 // confirm && console.log('点击了确定')
18 // cancel && console.log('点击了取消')
19 // }
20 // })
21
22 // 不传⼊参数
23 // const res = await wx.modal()
24
25 // 传⼊参数
26 const res = await wx.modal({
27 title:'新的提示',
28 showCancel:false
29 })
30
31 console.log(res);
32 
33 }
34
35 })
36                    

  

2、渲染首页区域

例：渲染猜你喜欢+⼈⽓推荐区域

2.1、在index.wxml中，将数据传递给 goods-list 组件，

<!-- 商品列表 -->
    <goods-list title="猜你喜欢" list="{{guessList}}" ></goods-list>
    <goods-list title="人气推荐" list="{{hotList}}" ></goods-list>

 在goodlist.wxml中遍历 goods-item 组件，并在goodcard.js将数据传递给 goods-item  组件...

//components/goods-list/goods-list.wxml
 <!-- 商品列表组件 -->
 <view class="goods_container" wx:if="{{ list.length }}">
 <!-- 标题 -->
<view class="goods_title">{{title}}</view>
 <!-- 列表区域 -->
<view class="goods_card_list">
<goods-card wx:for="{{ list }}" wx:key="id" goodItem="{{ item }}"></goodscard>
</view> 
<!-- 查看更多 -->
<!-- coding -->
</view>

//components/goods-list/goods-list.wxml
 <!-- 商品列表组件 -->
 <view class="goods_container" wx:if="{{ list.length }}">
 <!-- 标题 -->
<view class="goods_title">{{title}}</view>
 <!-- 列表区域 -->
<view class="goods_card_list">
<goods-card wx:for="{{ list }}" wx:key="id" goodItem="{{ item }}"></goodscard>
</view> 
<!-- 查看更多 -->
<!-- coding -->
</view>

 

ps：wx:for / v-for的用法

wx:for定义

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item实现列表渲染

用法：<!-- 默认item表示其中一项数据 -->
 
<!-- 默认index表示数据项的索引 -->
 
<view wx:key='{{index}}' wx:for='{{list}}'>
 
  {{index}} {{item}}
 
</view>

 

wx:for-index 给索引起一个别名；wx:for-item 给数据项起一个别名

v-for的四种使用方法分别是：
1.使用v-for循环一个简单的数组

例：

在Vue中使用v-for遍历数组时v-for最常见的一种使用方式。

（1）先在data中定义数组

arr: [1, 2, 3, 4, 5],

（2）在标签中遍历
————————————————         

2.使用v-for循环一个复杂的数组

3.使用v-for循环对象

4.v-for循环一个迭代的数字

<div id="app">
 
            <!--v-for循环一个简单的数组-->
 
           <p v-for="item in list">{{item}}</p>
 
           <P v-for="(item ,i) in list">索引值：{{i}}---每一项：{{item}}</P>
 
           <!--v-for循环一个复杂的数组-->
 
           <p v-for="(item,i) in list1">索引值：{{i}}--id：{{item.userid}}---姓名：{{item.username}}</p>
 
           <!--v-for循环一个对象-->
 
           <p v-for="(val,key,i) in list2">id：{{val}},name:{{key}},index:{{i}}</p>
 
           <!--v-for 循环一个迭代数字-->
 
           <p v-for="count in 10">这是第{{count}}次循环</p>

    

通过封装HTTP的GET、POST、PUT、DELETE方法，我们可以得出以下结论：

遵循RESTful原则：封装这些方法通常意味着你正在遵循RESTful（Representational State Transfer）架构风格。RESTful API使用HTTP协议的方法（如GET、POST、PUT、DELETE）来表示对资源的操作，使得API更加清晰、简洁和易于理解。

明确的操作语义：

GET：用于从指定的资源请求数据。
POST：用于提交新的数据到指定的资源，常用于提交表单数据。
PUT：用于更新指定资源的全部数据。
DELETE：用于删除指定的资源。封装这些方法使得每种操作都有明确的语义，便于开发和维护。
提高代码的可重用性和可维护性：通过封装这些方法，你可以将HTTP请求的逻辑抽象出来，使得在多个地方调用相同的HTTP请求时，只需要调用封装好的方法，而不需要重复编写HTTP请求的代码。这大大提高了代码的可重用性和可维护性。

安全性考虑：封装这些方法时，通常会考虑安全性问题，如验证、授权和加密等。例如，在POST或PUT请求中，可能会验证请求体的数据是否合法；在DELETE请求中，可能会验证请求者是否有权删除指定的资源。

易于测试和调试：由于HTTP请求的逻辑被封装在单独的方法中，这使得对这些方法进行单元测试变得相对容易。同时，如果出现问题，也可以通过调试这些方法来定位问题所在。

适应不同前端和客户端：封装好的HTTP方法可以被不同的前端和客户端调用，如Web浏览器、移动应用、命令行工具等。这使得API更加通用和灵活。

支持版本控制：在封装HTTP方法时，可以考虑支持版本控制。例如，可以在URL中添加版本号或使用其他机制来区分不同的API版本。这使得在升级或修改API时能够保持向后兼容性。