热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序开发之注册和预览小程序详解

这篇文章分享微信小程序开发之注册和预览小程序详解

本教程旨在为想学习小程序的同学提供一个快速上手的教程,如果你之前接触过react.js或者vue.js之类的前端框架,相信你很快就能学会小程序的开发。如果没有接触过,也不要有畏难心理,本教程主要面向的就是初学者,所以会尽量写的详细一点。相信跟我一起走完教程,一定可以学会小程序的开发。

本教程分为三个部分:

第一部分:理论篇

这部分介绍微信小程序开发所涉及到的基础知识,让你对小程序的开发有一个整体的概念。

第二部分:实战篇

将带领读者朋友们和我一起开发一个真正的小程序,和我一起享受编程的乐趣。

第三部分:附录

一些额外的内容将在附录中说明。

在学习过程中,如果你有任何疑惑,请关注我的微信公众号,直接提问即可。

搭建开发环境

  • 下载最新版微信小程序开发工具: 下载页面

  • 选择适合你系统的版本进行安装,目前支持windows32,windows64以及mac系统

  • 安装完成之后,打开微信web开发者工具,然后用手机微信扫码登陆。

  • 选择添加项目,可以看到,要添加一个新的小程序项目需要填写三部分内容:AppID,项目名称,项目目录。

在这里,为了能快速开发,我们先选择 无AppID 这个选项,更多有关AppID的内容,可以到附录中查看。这里不再赘述。

项目名称,就是你给你的项目取一个名字。

项目目录,是指你的小程序的代码将放在哪个目录下,你可以自己在本地创建一个文件夹,也可以在github创建一个新项目,都可以。在这里为了简单,我直接在桌面新建了一个文件夹。

至此,开发小程序的环境已经搭建完成,本节内容也到此结束,下节我们将介绍如何配置小程序!

配置小程序

这一节,我们将介绍小程序的配置。首先,让我们来看看项目自动生成的app.json文件长什么样子。

其实这里,共有五个部分可以配置,分别是pages, window, tarBar, networkTimeout和debug

pages:定义的是这个小程序由哪些页面组成。

在以后需要新增或者减少页面时,都需要在这里进行设置,有几个页面pages数组就有几项。

可以看到pages是一个数组,而数组的第一项就是小程序的初始页面,你可以试着把 logs 页面移动到最前面看看效果,这在开发的时候是一个不错的小技巧。

还有一个技巧要分享给你的是,在我们需要添加一个新页面的时候,没必要傻傻的手动去创建文件夹,然后新建xxx.josn, xxx.js, xxx.wxml, xxx.wxss这四个文件。我们只要在 pages数组中 添加一个你想创建的页面,然后 Ctrl + s 保存即可!是不是很酷?

{
  "pages":[
          "pages/logs/logs",
    "pages/index/index"
  ],
  ...
}

window: 定义的是窗口的配置信息。[td]

{
  "tabBar": {
          "backgroundColor": "#fbfbfb",
          "borderStyle": "white",
          "selectedColor":"#50e3c2",
          "color": "#aaa",
          "list": [{
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "images/home.png",
            "selectedIconPath": "images/homeHL.png"
          },{
            "pagePath": "pages/me/me",
            "text": "我",
            "iconPath": "images/me.png",
            "selectedIconPath": "images/meHL.png"
          }]
        }
}

networkTimeout: 用来设置各种网络请求的超时时间。

如果你不是很清楚这个networkTimeout配置有什么作用,那么忽略就好。这对实际开发并没有什么影响。

[td]

以下代码仅为示例

{
  "networkTimeout": {
    "request": 5000,
    "connectSocket": 5000,
    "uploadFile": 5000,
    "downloadFile": 5000
  },
  "debug": true
}

debug

可以在开发者工具中开启 debug 模式,在开发者工具的控制台面板,调试信息以 info的形式给出,其信息有 Page 的注册,页面路由,数据更新,事件触发 。 可以帮助开发者快速定位一些常见的问题。

如果开启 debug 模式见上面代码

好了,五个部分介绍完了,希望各位在学习完这一节后可以尽情探索,修改各种配置看看效果,毕竟这样印象会更加深刻。

下一节我们将讲到小程序的项目结构。

项目结构

pages

这个文件夹用来存放小程序的页面,可以看到,其中的每个文件夹就表示一个页面,比如,要定义index的页面如何表现,就在index文件夹中的四个文件中定义。

一个页面由四个文件组成,分别是 xxx.js, xxx.json, xxx.wxml, xxx.wxss

  • xxx.js 将在下小节讲到,因为这里涉及到的内容比较多,需要单独列出一节来讲。

  • xxx.json 和 app.json 类似,app.json是整个微信小程序的配置文件,而xxx.json是xxx这单个页面的配置文件。

比如,logs.json 文件就配置了logs这个页面的 导航栏的标题~

{
    "navigationBarTitleText": "查看启动日志"
}

注意:json 文件中不能有任何注释,不然会报错。

  • xxx.wxml 可以把它看作是 html 的变种,同样是xml的语法。

  • xxx.wxss 则可以看成是 css 。

这里需要理解的就是,小程序的开发 其实就是用开发网页的技术来开发,这大大节省了我们前端人员的学习成本。但同时也要注意,这货并不是HTML5,虽然它很像,开发过程中会遇到很多坑。

utils

这个文件夹中的utils.js主要用来定义一些公用的函数。

我们也可以在里面新建一个 api.js 文件来抽象我们服务器的地址。

app.js

这部分内容同样放在下一节一起讲!

app.json

这个文件的作用我们在上一节已经讲过了,是整个小程序的配置文件。

app.wxss

这里定义的是整个小程序的 样式表

页面生命周期

终于到了小程序最核心,最关键的部分了,这也是我们理论篇的最后一节,那么我们开始吧!

App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。

App({
  onLaunch: function() { 
    // Do something initial when launch.
  },
  onShow: function() {
      // Do something when show.
  },
  onHide: function() {
      // Do something when hide.
  },
  globalData: 'I am global data'
})

Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }
})

此时,相信你对小程序开发的理论知识已经有一定了解了。

如果觉得比较模糊,第二部分的实战篇就是为了让我们能够结合理论来进行实践。

如果你比较自信,你也可以直接看这个实战项目的源代码。

以上就是微信小程序开发之注册和预览小程序详解的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • 使用Echarts for Weixin 小程序实现中国地图及区域点击事件
    本文介绍了如何使用Echarts for Weixin在微信小程序中构建中国地图,并实现区域点击事件。包括效果展示、条件准备和逻辑实现的具体步骤。 ... [详细]
  • 小程序的授权和登陆
    小程序的授权和登陆 ... [详细]
  • Windows环境下Oracle数据库迁移实践
    本文详细记录了一次在Windows操作系统下将Oracle数据库的控制文件、数据文件及在线日志文件迁移至外部存储的过程,旨在为后续的集群环境部署做好准备。 ... [详细]
  • 如何高效学习鸿蒙操作系统:开发者指南
    本文探讨了开发者如何更有效地学习鸿蒙操作系统,提供了来自行业专家的建议,包括系统化学习方法、职业规划建议以及具体的开发技巧。 ... [详细]
  • 如何高效渲染JSON数据
    本文介绍了在控制器中返回JSON结果的方法,并详细说明了如何利用jQuery处理和展示这些数据,为Web开发提供了实用的技巧。 ... [详细]
  • 在日常生活中,支付宝已成为不可或缺的支付工具之一。本文将详细介绍如何通过支付宝实现免费提现,帮助用户更好地管理个人财务,避免不必要的手续费支出。 ... [详细]
  • 从CodeIgniter中提取图像处理组件
    本指南旨在帮助开发者在未使用CodeIgniter框架的情况下,如何独立使用其强大的图像处理功能,包括图像尺寸调整、创建缩略图、裁剪、旋转及添加水印等。 ... [详细]
  • 微信小程序开发指南:创建动态电影选座界面
    本文详细介绍如何在微信小程序中实现一个动态且可视化的电影选座组件,提高用户体验。通过合理的布局和交互设计,使用户能够轻松选择心仪的座位。 ... [详细]
  • 基于Net Core 3.0与Web API的前后端分离开发:Vue.js在前端的应用
    本文介绍了如何使用Net Core 3.0和Web API进行前后端分离开发,并重点探讨了Vue.js在前端的应用。后端采用MySQL数据库和EF Core框架进行数据操作,开发环境为Windows 10和Visual Studio 2019,MySQL服务器版本为8.0.16。文章详细描述了API项目的创建过程、启动步骤以及必要的插件安装,为开发者提供了一套完整的开发指南。 ... [详细]
  • 如何撰写初级和高级前端开发者的专业简历
    如何撰写初级和高级前端开发者的专业简历 ... [详细]
  • 本文详细介绍了在 Vue.js 前端框架中集成 vue-i18n 插件以实现多语言支持的方法。通过具体的配置步骤和示例代码,帮助开发者快速掌握如何在项目中实现国际化功能,提升用户体验。同时,文章还探讨了常见的多语言切换问题及解决方案,为开发人员提供了实用的参考。 ... [详细]
  • STM32代码编写STM32端不需要写关于连接MQTT服务器的代码,连接的工作交给ESP8266来做,STM32只需要通过串口接收和发送数据,间接的与服务器交互。串口三配置串口一已 ... [详细]
  • 本文介绍了一个来自AIZU ONLINE JUDGE平台的问题,即清洁机器人2.0。该问题来源于某次编程竞赛,涉及复杂的算法逻辑与实现技巧。 ... [详细]
  • 本文回顾了作者在求职阿里和腾讯实习生过程中,从最初的迷茫到最后成功获得Offer的心路历程。文中不仅分享了个人的面试经历,还提供了宝贵的面试准备建议和技巧。 ... [详细]
  • H5技术实现经典游戏《贪吃蛇》
    本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ... [详细]
author-avatar
KLD受害者
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有