记一次小程序项目的开发心得

简介:


a0dc0a7a26df9dac103de825f49ac67d0f8112ea

一、 框架类

1.Template引入与component构造器引入,应该选择哪一个?

只是展示用,建议使用template,组件中涉及到较多的逻辑,建议使用component。 因为template没有自己的js文件,所以在列表中涉及到列表子项独立的操作,建议将列表子项写成component。

示例代码: page文件


<!--Wxml-->
<!--引用-->
<import src="goodlist.wxml"/>
<!--使用  goodList为page传入的数据-->
<template is="statement-goodlist" data="{{goodList}}"/>

2.wxs文件的使用

Wxs更多的是作为一个过滤器使用,.wxs 文件可以被其他的 .wxs 文件 或 WXML 中的  标签引用。 .wxs模块中引用其他 wxs 文件模块,可以使用 require 函数。

示例代码 page文件--类似过滤器效果


<!--wxml-->
<!--引用-->
<wxs src="../../assets/wxs/phonenum.wxs" module="phone" />
<!--使用-->
<text class='statement-adress-cellphone'>{{phone.phone(AddressInfo.phone)}}</text>

3.生命周期


 /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    // 前进-跳转到其他页面的时候
  },
  
/**
 * 生命周期函数--监听页面卸载
 */
onUnload: function () {
  // 后退-点击当前页面返回的时候
}

利用这两个生命周期可以解决的问题: 防止用户快速切换页面(A->B)。导致动态设置导航栏中的文字显示出现错误 快速切换页面可能导致A页面中的异步数据还未返回,致使当切换到B页面的时候A数据才返回,使得导航栏显示的文字为A页面的导航栏标题。(即:A页面的导航栏标题为hello,B页面的导航栏标题为world,当快速由A->B,此时虽然在B页面,但是导航栏标题显示的是hello,而不是world)

参考链接: 小程序中的生命周期onHide和onUnload

二、 通信类

如果说数据是汽车的话,传递的通道或方式就是汽车要行驶的道路。所以,数据驱动型的框架,我们少不了要学习如何建设这条"道路",让"汽车"高速行驶。

1.页面与组件通信

1-1.页面传递内容给组件

page为页面的属性名

components 为组件的外部属性名, 用properties对象接收

页面

 
   


<!-- Wxml --> 
<components-a components="{{page}}"></components-a>
<!-- Js -->
Page({
  data: {
      page: '父亲pages'
  }
})

组件

父亲pages


<!-- Wxml --> 
<!-- Js -->
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    components: { // 属性名
      type: String
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onTap: function () {
      let page = this.data.components
      console.log(page)  // 我是父亲pages
    }
  }
})





1-2.组件传递内容给页面

给组件设置myevent事件,通过this.triggerEvent('myevent', myEventDetail) 触发该myevent事件并传递内容,在页面用onMyEventshi事件监听传递过来的数据。

 
  

页面


<!-- Wxml --> 
<components-a bind:myevent="onMyEvent"></components-a>
<!-- Js -->
Page({
  // 监听myevent事件
  onMyEvent: function (e) {
    console.log('接收a组件传递的内容:', e.detail) // '我是a组件'
  }
})

组件


<!-- Wxml -->
<!-- 在自定义组件"components-a"中 -->
<button bindtap="onTap">点击</button>
<!-- Js -->
Component({
  properties: {}
  methods: {
    onTap: function(){
      var myEventDetail = '我是a组件'
      this.triggerEvent('myevent', myEventDetail) // 触发组件上的“myevent”事件
    }
  }
})

2.组件与组件通信

两个无任何关联的组件:通过全局变量或本地缓存传递数据

两个有关联的组件(同一个父页面下): 通过上面的方法,用组件 => 页面 => 组件的方式传递数据。

3.页面之间的通信

3-1.使用全局变量 app.globalData

3-2.使用本地缓存 wx.setStorageSync

3-3.url传递



// A页面-传递数据
// 需要注意的是,wx.switchTab 中的 url 不能传参数。
wx.navigateTo({
  url: '../pageD/pageD?name=raymond&gender=male'
})


// B页面-接收数据
// 通过onLoad的option
<!-- JS -->
...
Page({
  onLoad: function(option){
    console.log(option.name + 'is' + option.gender) //  raymond is male
    this.setData({
      option: option
    })
  }
})

3-4.后一级页面对前一级页面的数据的管理(通过获取到页面对象进行数据操作)

这个方法的精髓,是通过获取到其他页面的对象原型,然后通过原型方法 setData 对当前对象管理的 data 进行修改

示例如下:


// pageE.js
Page({
  data: {
    index: 1
  }
})

当跳转到下一个页面 F 之后,假定在 F 中有操作需要对 E 中的数据有修改,则可以使用以下方法:



// pageF.js
...
Page({
  changeIndexInE: function(){
    var pages = getCurrentPages();
    var prevPage = pages[pages.length - 2];
    prevPage.setData({
      index: 0
    })
  }
})

这个方法可以操作页面堆栈里面的页面的数据,可以做到让后一级页面对上级页面群的数据管理

参考链接:爱范儿-页面之间的数据传递

4.页面与模板之间的通信

页面

 
 

<!-- Wxml -->
<template is="msgItem" data="{{...item}}"/>
  
<!-- JS -->
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

传入模板的除了变量,还可以是事件方法对象。例如,模板中的点击事件,可以传递到使用模板的元素中。

三 、技巧类

1. 索引是变量,修改数组的值

根据文档,采用'array[0].text':'changed data'的格式。但是我们实际应用中需要改变的索引值往往是动态的,所以,改装一下如下:

示例代码:

// 修改某个数组的动态的值 --- 提前将数组对象准备好
// 索引index是变量, value是变量
var shipmentTypeObj = "shipmentType[" + index + "].code"
this.setData({[shipmentTypeObj]: value})

2.其它方法封装(如果有更好的方法,欢迎交流)

that's all, 以上就是我目前所有的关于小程序项目的经验总结。觉得对你开发有帮助的可以点赞收藏一波,如果我哪里写错了,希望能指点出来。如果你有更好的想法或者建议,可以提出来与我交流。大家一起进步,共同成长。感谢[鞠躬]。



原文发布时间为:2018年06月27日
原文作者:付出
本文来源: 掘金      如需转载请联系原作者

相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
2月前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
26天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
1月前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
74 0
|
2月前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
30天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
27 0
|
2月前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
2月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
3月前
|
人工智能 小程序 IDE
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
随着AI技术的发展,各大厂商推出的AI运动APP如“乐动力”、“天天跳绳”等,使云上运动会、线上健身等概念大热。本文将指导你如何利用“云智AI运动识别小程序插件”,在微信小程序中实现类似功能,包括工具搭建、服务启动及数据回传等步骤,助力开发者高效开发AI运动小程序。
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
|
3月前
|
人工智能 JSON 小程序
【一步步开发AI运动小程序】八、利用body-calc进行姿态识别
随着AI技术的发展,各大厂商推出的如“乐动力”、“天天跳绳”等AI运动APP,使得云上运动会、线上健身等概念风靡一时。本文将引导读者从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”,介绍人体姿态检测规则、规则编写语法、执行检测规则运算及姿态检测实战等内容,助力开发者轻松实现AI运动小程序的开发。
【一步步开发AI运动小程序】八、利用body-calc进行姿态识别

热门文章

最新文章