signed

QiShunwang

“诚信为本、客户至上”

小程序项目开发概览

2021/4/26 17:15:34   来源:

小程序的四个重要的文件

  1. *.js
  2. *.wxml —> view结构 ----> html
  3. *.wxss —> view样式 -----> css
  4. *. json ----> view 数据 -----> json文件

储备知识

  1. 理解事件机制
  2. 理解组件化
  3. 理解数据绑定
  4. Flex布局
  5. 移动端适配方案

小程序适配方案

Iphon6: 1rpx = 1物理像素 = 0.5px
微信官方提供的换算方式:

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

数据绑定 & 事件

初始化数据: 当前页面的js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg: '开启小程序之旅'
  },
})

修改数据

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

声明周期钩子函数

Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg: '开启小程序之旅'
  },

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

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

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

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

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

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

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

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

获取登录用户的数据

文档查看位置

官方文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
API—> 开放接口

代码示例

// 获取登录用户的数据
    wx.getUserInfo({
      //withCredentials: true,
      success: (res) => {
        console.log(res);
        let user = res.userInfo;
        this.setData({
          user
        })
      }
    })  

自定义事件

冒泡事件

  1. 定义:冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
  2. 冒泡事件列表:
    https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

非冒泡事件

  1. 定义:当一个组件上的事件被触发后,该事件不会向父节点传递。
  2. 非冒泡事件:表单事件和自定义事件通常是非冒泡事件
    https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

绑定事件

bind绑定

事件绑定不会阻止冒泡事件向上冒泡

<view bindtap="handleTap" class='start_container' bindtap="handleTap">
  <text class='start'>开启小程序之旅</text>
</view>

catch 绑定

事件绑定可以阻止冒泡事件向上冒泡

<view catchtap="handleTap" class='start_container' bindtap="handleTap">
  <text class='start'>开启小程序之旅</text>
</view>

跳转页面

wx.navigateTo(OBJECT)

跳转有记录,可通过回退键进行回退

// 跳转到list页面
    wx.navigateTo({
      url: '/pages/list/list',
      success(){
        console.log('跳转成功');
      }
    })    

wx.redirectTo(OBJECT)

没有记录,不能进行回退

// 跳转到list页面
    wx.redirectTo({
      url: '/pages/list/list',
      success(){
        console.log('跳转成功');
      }
    })    

组件 & 模板使用

组件

<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>

模板

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

<template name='listTemplate'>
  <view>
    <text>tempalte content</text>
  </view>
</template>

使用模板

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

使用模板样式

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

数据存储

存数据:setStorage, 同步: setStorageSync

// 数据存储
    wx.setStorage({
      key: 'isCollected',
      data: oldCollectFlag
    })

获取数据:getStorage 同步: getStorageSync

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

数据交互

发送请求

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

小程序设置

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

不同页面之间通信

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数据对象中
    }
  })
},

2)b页面

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

app应用存储公共数据

存取数据

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

读取数据

let app = getApp();
app.data.isPlay = false;

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