资讯专栏INFORMATION COLUMN

微信小程序开发小总结

niuxiaowei111 / 1273人阅读

摘要:框架这部分是小程序开发的核心,小程序采用视图和逻辑层代码相分离的结构,如果你用过这部分也不难理解,但是也有一些区别。工具这部分没有什么好说的,微信开发开始还是用微信自己的开发工具比较方便。

小程序开发文档使用说明

小程序的文档分为 简易教程、框架、组件、API 、工具
https://developers.weixin.qq....

简易教程---介绍小程序开发的一些基本情况 开发方式,项目目录等等,看完这些,基本能了解怎么跑起来项目,在哪块写代码,各个文件的作用。

框架--- 这部分是小程序开发的核心,小程序采用视图和逻辑层代码相分离的结构,如果你用过vue angular react 这部分也不难理解,但是也有一些区别。

组件---小程序的每个标签相当于一个组件,官方已经预定义了一些常用的标签组件,能够满足日常基本功能的使用,这部分分时小程序开发高效的一个原因,基础的组件都定义好,需要用就行。这部分的文档,只要过一下,大概有那些组件,用的时候再仔细阅读文档。
开发中常常使用的组件:

视图容器    view       scroll-view  swiper

基础内容  text

媒体    image  videoaudio

表单   button input checkbox  label picker 

画布  canvas 

地图  map

API---主要,可以的调起微信提供的能力,如果你在前端开发中没有遇到过的功能,都能在这里查到,比如小程序的头部,页面的刷新,本地存储,获取用户信息,支付功能等。

工具--- 这部分没有什么好说的,微信开发开始还是用微信自己的开发工具比较方便。

开发中常见问题 1.整个小程序的配置

小程序的全局配置在 app.json 中,小程序每添加一个页面,都要在全局中注册,文档:
https://developers.weixin.qq....

2 列表渲染

    小程序的列表渲染和其他的前端模板语言相似,但可以用wx:for-item="itemname" 来指定每次循环对象的名字,可以用wx:for-index="indexname" 来指定 循环序列的键值,这个功能就是指定循环数组时的键和值的别名。
    列表中的wx:key 是一个比较令人迷惑的地方 ,不写会报错,但是随便给一个字符也不合理,最好是循环中的一个标记唯一性的键值,比如id

3 事件绑定

  小程序的事件绑定,写法上有些区别,主要2种 bind:youevent="eventhandle"  catch:youevent="eventhandle" catch 能阻止事件冒泡

4.模块开发

小程序可以使用common.js 的模块开发方式。moudle.exports /exports 导出模块, require (‘file.js’) 的方式引入模块

5.页面的生命周期

onLoad 生命周期函数--监听页面加载(可以在这里异步的请求数据,初始化页面)
onReady 生命周期函数--监听页面初次渲染完成(在这里,可以获取页面视图的布局数据)
onShow 生命周期函数--监听页面显示
onHide 生命周期函数--监听页面隐藏
onUnload 生命周期函数--监听页面卸载

6.页面视图中元素的位置和大小

   在小程序开发过程中肯定会遇到要获取页面中元素的位置和元素的宽高。这部分在 文档=》api=》界面
wxml节点信息 中找相应的api

getRect: function(){
    wx.createSelectorQuery().select("#the-id").boundingClientRect(function(rect){
      rect.id // 节点的ID
      rect.dataset // 节点的dataset
      rect.left // 节点的左边界坐标
      rect.right // 节点的右边界坐标
      rect.top // 节点的上边界坐标
      rect.bottom // 节点的下边界坐标
      rect.width // 节点的宽度
      rect.height // 节点的高度
    }).exec()
  },
7.交互反馈

交互反馈详情在 文档=》api=》界面=》交互反馈
一个成功的反馈

wx.showToast({
  title: "成功",
  icon: "success",
  duration: 2000
})
8.跨页面更新数据

小程序整个应用是用App()构造方法组成,页面是用Page() 构造方法注册。小程序只有组件才有自定义事件,在Page() 无法使用自定义事件通过触发事件在页面间传递数据不可行,微信提供 获取整个应用实例的getApp() 方法,这样可以获取app 的实例,通过 pages = getCurrentPages(); 获取 打开页面的 列表 ,通过 pages来调用各页面的方法和更新数据

var pages = getCurrentPages();//获取页面栈
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2]; //上一个页面
//直接调用上一个页面的setData()方法,把数据存到上一个页面中去
prevPage.setData({
  mdata:1 
});
//调用上一个页面的方法来更新数据
prePage.updatefunc(altdata)

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96368.html

相关文章

  • 前端资源系列(3)-微信开发资源汇总

    摘要:微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序 微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者...

    paney129 评论0 收藏0
  • Java 初学者做的第一个微信总结--关于Java基础

    摘要:官方资料微信公众平台注册小程序。官网开发文档社区开发工具部署微信小程序微信小程序本身不需要部署,在微信开发工具中直接上传代码就行。 为什么 学习 Java 三年,目前已经工作了2年,因为自学,基础差,所以打算年末总结一下常见的基础知识和面试点; 也可以通过独立做一个项目整合自己工作期间学习的知识,加深印象。 但是想着回家或是平时手机用的多,做一款APP和小程序很方便查看。 项目展示 本...

    mudiyouyou 评论0 收藏0
  • 微信开发库grace vs wepy

    摘要:和都是辅助小程序开发的开源库,本文对两者做个对比。微信的这种限制决定了小程序一般只是用于实现核心功能,不会用作复杂功能。在笔者了解的很多小程序,甚至大都是用原生开发的。 grace和wepy都是辅助小程序开发的开源库,本文对两者做个对比。 注:本文是作者本人的一些拙见,纯粹的技术讨论,不想引起技术信仰之争,欢迎积极、正向的讨论及建议。 如果你还不了解Grace, 请参考:微信小程序开发...

    james 评论0 收藏0
  • 微信开发踩坑总结(持续完善中)

    摘要:由于个人技术水平有限,在问题描述,解决方案中存在的问题,希望可以得到各位前辈的指点。本篇主要是记录我在开发微信小程序中遇到的问题。各记录点排序,跟随自己开发过程中的问题出现时间而定。。微信小程序数据页面数据传递总结 由于个人技术水平有限,在问题描述,解决方案中存在的问题,希望可以得到各位前辈的指点。本篇主要是记录我在开发微信小程序中遇到的问题。各记录点排序,跟随自己开发过程中的问题出现...

    tianhang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<