开发小程序项目

作者: songstar | 来源:发表于2020-08-14 15:57 被阅读0次

一. 小程序特征（需要背下来的东西）

1.1 小程序没有DOM对象，一切基于组件化

什么是组件？首先我们先接触的是Js模块化(为了代码复用)-->组件化-->工程化
什么叫模块
将一个大的Js文件，按照一定规则分成小的Js文件，每个Js文件数据是私有的，相对安全，Js模块互相不干扰，如果一个项目用多模块开发，那么就是模块化开发。
什么是组件（即有html+css也有js）
具有特定功能效果代码的组合，如果一个项目用多组件开发，那么就是组件化开发。

1.2 小程序的四个重要的文件

a. *.js
b. *.wxml ---> view结构 ----> 相当于html
c. *.wxss ---> view样式 -----> 相当于css
d. *. json ----> view 数据 -----> json文件

1.3 储备知识

a. 理解事件机制
b. 理解组件化
c. 理解数据绑定
d. Flex布局
e. 移动端适配方案

贴心小建议

学习vue后开发小程序的感觉会爽到飞起！

二. Flex布局简介

2.1 什么是flex布局？

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
display: ‘flex’

伸缩盒模型.png

2.2 flex属性

1. flex-direction:

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex属性学习地址

三. 移动端适配

3.1 物理像素

屏幕的分辨率
能说明清新度，物理像素相当于屏幕的分辨率
设备能控制显示的最小单元，可以把物理像素看成是对应的像素点

3.2. 设备独立像素 & css像素

都是虚拟像素
设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素(比如：CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。

3.3 dpr比 & DPI & PPI

dpr: 设备像素比，物理像素/设备独立像素 = dpr，（一般以Iphon6的dpr为准 dpr = 2，记死）
PPI: 一英寸显示屏上的像素点个数
750²=562500 记住！ppI值越大，像素越高
DPI：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰

image.png

四. 小程序适配方案

常用的适配 rem(根元素字体的大小) viewport（布局视口）
视觉视口：看到视口大小
布局视口：真正投放的页面，通常比视觉视口要大
布局视口 = 视觉视口，好处页面完整
Iphon6： 1rpx（小程序计算单位） = 1物理像素 = 0.5px dpr = 物理像素/设备对立像素
小程序已经給我们做了适配。
面试的时候如果让你去说小程序适配方案，怎么样去说：
首先小程序底层已经做了Viewport适配，有个meta标签，下面有个width =d 能让布局视口=视觉视口，一定要说上面有个计算方式，1rpx = 1 物理像素 = 0.5px
微信官方提供的换算方式：

以iPhone6的物理像素个数为标准: 750;
1rpx = 目标设备宽度 / 750 * px;
注意此时底层已经做了viewport适配的处理，即实现了理想视口

五. 扩展内容

视网膜屏幕是分辨率超过人眼识别极限的高分辨率屏幕，由苹果公司在2010年在iPhone 4发布会上首次推出营销术语。

*Iphone的dpr = 2; dpr=2是人类肉眼分辨的极限

问题： Iphone6的dpr为多少？Iphone6Plus比Iphone6显示图像清晰吗？
Iphone6Plus的dpr = 3, Iphone6Plus比Iphone6是一样的，因为肉眼有个极限，dpr再高，dpr = 3 和 dpr = 2是一样的

六. 登录页小试牛刀

6.1 效果演示

image.png

6.2 注册程序，创建文件

image.png

6.3 应用主文件(入口文件)

A. App.wxml
B. App.wxss
C. App.js
D. App.json

6.4 主页结构： index.wxml

<!--pages/index/index.wxml-->
<view class='indexContainer'>
  <image class='avatar' src='/images/index/cart.jpg'></image>
  <text class='userName'>{{msg}}</text>
  <view class='goStudy' bindtap='handleParent'>
    <text bindtap='handleChild'>欢迎开启小程序之旅</text>
  </view>
</view>

6.5 主页样式： index.wxss

/* pages/index/index.wxss */
page {
  height: 100%;
  background-color: pink;
}
.indexContainer {

  display: flex;
  flex-direction: column;
  align-items: center;

}

.avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 100px;
  margin: 100px 0;

}

.userName {
  font-size: 32rpx;
  font-weight: 900;/*400 相当于原来的大小*/
  margin: 100rpx 0;

}

.goStudy {
  width: 300rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  border:1rpx solid #999;
  border-radius: 10rpx;
  text-align: center;

}

6.6 入口文件： app.json配置

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#FF00FF",
    "navigationBarTitleText": "欢迎光临",
    "navigationBarTextStyle": "black"

  }
}

七数据绑定 & 事件

7.1 数据绑定

思想：同Vue一样数据可以初始化在当前页面的管理内存的data中，页面中使用数据会自动去data里找
初始化数据：当前页面的js文件

页面的初始数据

Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg: "小帅的驿栈"
  }

})

修改数据

this.setData({
msg: '我是修改之后的数据'
    })

7.2 声明生命周期钩子的函数

Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg: "小帅的驿栈"
  },


  handleParent(){
    console.log("父元素");
  },

  handleChild() {
    console.log("子元素");
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

7.3 获取登录用户的数据

文档查看位置: API---> 开放接口
代码示例：


// 获取登录用户的数据

    wx.getUserInfo({

      //withCredentials: true,

      success: (res) => {

        console.log(res);

        let user = res.userInfo;

        this.setData({

          user

        })

      }

    })

7.4 自定义事件

冒泡事件
事件三个阶段：捕获处理冒泡
事件委托：将子元素的委托给父元素，好处：防止重复定义事件，利用了冒泡机制

a) 定义：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
冒泡事件列表

非冒泡事件

a) 定义：当一个组件上的事件被触发后，该事件不会向父节点传递。

b) 非冒泡事件：表单事件和自定义事件通常是非冒泡事件

非冒泡事件

7.5 绑定事件

bind绑定：事件绑定不会阻止冒泡事件向上冒泡
catch 绑定: 事件绑定可以阻止冒泡事件向上冒泡

进程代表程序一次完成的过程，通常打开一个程序就是一个进程，
线程是程序执行的最小单元
谷歌浏览器多进程多线程

7.6 跳转页面

wx.navigateTo(OBJECT)：跳转有记录，可通过回退键进行回退9

// 跳转到list页面

    wx.navigateTo({

url: '/pages/list/list',

      success(){

        console.log('跳转成功');

      }

    })

wx.redirectTo(OBJECT)：没有记录，不能进行回退


// 跳转到list页面

    wx.redirectTo({

url: '/pages/list/list',

      success(){

        console.log('跳转成功');

      }

    })

八. 列表页：list

8.1 效果演示

[图片上传失败...(image-914c8c-1596612795519)]

[图片上传失败...(image-5d0912-1596612795519)]

8.2 注册页面

list.wxml
list.wxss
list.js
list.json

4.9组件 & 模板使用

9.1 组件

<view>

  <swiper indicator-dots='true' indicator-color='deepPink'>

    <swiper-item>

      <image src='/images/detail/carousel/iqiyi.png'></image>

    </swiper-item>

    <swiper-item>

      <image src='/images/detail/carousel/vr.png'></image>

    </swiper-item >

    <swiper-item>

      <image src='/images/detail/carousel/wx.png'></image>

    </swiper-item >

  </swiper>

</view>

9.2 模板

定义模板： name=‘模板名字’

<template name='listTemplate'>

  <view>

    <text>tempalte content</text>

  </view>

</template>

使用模板


<**import** **src=****"/detail_template/detail_item_template.wxml"** />

使用模板样式


@import '../templates/list-template.wxss';

4.10 数据存储

存数据：setStorage，同步： setStorageSync


// 数据存储

    wx.setStorage({

key: 'isCollected',

      data: oldCollectFlag

    })

获取数据：getStorage 同步: getStorageSync

let oldCollectFlag = wx.getStorageSync('isCollected');

十音乐播放控制

10.1 音乐播放

API: wx.playBackgroundAudio
示例：


wx.playBackgroundAudio({

        dataUrl: detailObj.music.dataUrl,

        title: detailObj.music.title,

        success() {

          console.log('音乐播放成功');

        }

      });

10.2 音乐暂停

API: wx.pauseBackgroundAudio
示例：


wx.pauseBackgroundAudio

10.3 监听音乐播放暂停

监听播放API: wx.onBackgroundAudioPlay
监听暂停API: wx.onBackgroundAudioPause
示例：


wx.onBackgroundAudioPlay(() => {

      console.log('音乐播放'); // 注意真机上音乐播放监听只能执行一次。

      this.setData({

isMusicPlay: true

      })

      // 修改app数据记录是否播放和播放页面的下标

appDatas.appData.isPlay = true;

appDatas.appData.playPageIndex = this.data.index;

})

 // 监听音乐是否暂停

    wx.onBackgroundAudioPause(() => {

      console.log('音乐暂停');

      this.setData({

isMusicPlay: false

      })

appDatas.appData.isPlay = false;

appDatas.appData.playPageIndex = this.data.index;

    })

10.4 app应用存储公共数据

存取数据


App({   **data**: {     **isPlay**: **false**,      **playPageIndex**: **null**,      **movies**: {}    }  })

读取数据


**let** ***app*** = getApp();

app.data.isPlay = false;

备注：app方法配置对象中的属性和方法均为app应用实例的属性和方法

十一事件委托 & 事件数据传递

11.1 轮播图片点击跳转

事件委托给父元素：swiper


  <swiper catchtap='imgToDetail' indicator-dots='true' indicator-color='deepPink'>

    <swiper-item>

      <image data-detailId='{{4}}' src='/images/detail/carousel/01.jpg'></image>

    </swiper-item>

    <swiper-item>

      <image data-detailId='{{5}}' src='/images/detail/carousel/02.jpg'></image>

    </swiper-item >

    <swiper-item>

      <image data-detailId='{{6}}' src='/images/detail/carousel/03.jpg'></image>

    </swiper-item >

  </swiper>

11.2 传递事件数据

data-’传递数据key’ = value

11.3 currentTarget 和target的区别

target指向的是触发事件的元素
currentTarget指向的是捕获事件的元素

十二. 数据交互

12.1 发送请求


wx.request({ // 发送请求    **url**: ***API_URL***, // 请求的url    **header**: { // 设置请求头      **'Content-type'**: **'json'**,    },    success: (res) => {  // 请求成功的回调函数      *//* *隐藏提示加载信息*wx.hideToast();      **console**.log(res);  // 请求的成功的数据对象，注意是封装后的对象      **this**.setData({**movies**: res.**data**.subjects})    }  })

12.2 小程序设置

备注：

1. 小程序出于安全考虑所有的协议都是https协议，且如果没有在开发设置中配置请求的连接是无法访问指定的链接的。
1. 一个微信小程序的并发网络请求数量被限制在最多5个

[图片上传失败...(image-e34a4b-1596612795518)]

[图片上传失败...(image-9157ed-1596612795518)]

12.3 不同页面之间通信

1.a页面

**let** ***appData*** = getApp();  // 获取app中的数据对象

onLoad (options) {    *//* *加载到数据之前给用户显示**‘**正在加载的提示信息**’*wx.showToast({      **title**: **"****加载中****..."**,      **icon**: **"loading"**,      **duration**: 3000    });    wx.request({      **url**: ***API_URL***,      **header**: {        **'Content-type'**: **'json'**,      },      success: (res) => {        *//* *隐藏提示加载信息*wx.hideToast();        **console**.log(res);        **this**.setData({**movies**: res.**data**.subjects})        ***appData***.**appData**.**movies** = res.**data**.subjects; // 将数据更新至公共的app数据对象中      }    })  },

1. b页面


**let** ***appData*** = getApp();

onLoad: **function** (options) {    **console**.log(options.**id**);    **console**.log(***appData***.**appData**.**movies**);    **this**.setData({**movie**: ***appData***.**appData**.**movies**[options.**id**]})  },

开发小程序项目

一. 小程序特征（需要背下来的东西）

1.1 小程序没有DOM对象，一切基于组件化

1.2 小程序的四个重要的文件

1.3 储备知识

二. Flex布局简介

2.1 什么是flex布局？

2.2 flex属性

三. 移动端适配

3.1 物理像素

3.2. 设备独立像素 & css像素

3.3 dpr比 & DPI & PPI

四. 小程序适配方案

五. 扩展内容

六. 登录页小试牛刀

6.1 效果演示

6.2 注册程序，创建文件

6.3 应用主文件(入口文件)

6.4 主页结构： index.wxml

6.5 主页样式： index.wxss

6.6 入口文件： app.json配置

七 数据绑定 & 事件

7.1 数据绑定

7.2 声明生命周期钩子的函数

7.3 获取登录用户的数据

7.4 自定义事件

7.5 绑定事件

7.6 跳转页面

八. 列表页：list

8.1 效果演示

8.2 注册页面

4.9组件 & 模板使用

9.1 组件

9.2 模板

4.10 数据存储

十 音乐播放控制

10.1 音乐播放

10.2 音乐暂停

10.3 监听音乐播放暂停

10.4 app应用存储公共数据

十一 事件委托 & 事件数据传递

11.1 轮播图片点击跳转

11.2 传递事件数据

11.3 currentTarget 和target的区别

十二. 数据交互

12.1 发送请求

12.2 小程序设置

12.3 不同页面之间通信

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

七数据绑定 & 事件

十音乐播放控制

十一事件委托 & 事件数据传递