小程序的开发与传统的web前端开发极其相似,想必各位博友们关心的是如何去开发一个小程序,这里我简单介绍总结一下近期学习的如何开发小程序。

首先注册微信小程序

如果还没有微信公众平台的账号,先进入微信公众平台首页,点击“立即注册”按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择“小程序”即可。
接着填写账号信息,需要注意的是,填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱,而且每个邮箱仅能申请一个小程序。
激活邮箱之后,选择主体类型为“个人类型”,并按要求登记主体信息。

微信开发者工具

下载微信web开发者工具,根据自己的操作系统下载对应的安装包进行安装即可。
打开开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧!

小程序新建项目

打开开发者工具,选择“小程序项目”,点击右下角的“+”新建项目。
选择一个空的文件夹作为项目目录,填入刚刚的AppID,再填写一个项目名称,比如我这里叫做hello-minipro。点击“确定"进入工具主界面。

创建微信小程序完毕

项目目录结构

├── app.js     # 小程序的逻辑文件
    ├── app.json   # 小程序的配置文件
    ├── app.wxss   # 全局公共样式文件
    ├── pages      # 存放小程序的各个页面
    │   ├── index  # index页面
    │   │   ├── index.js     # 页面逻辑
    │   │   ├── index.wxml   # 页面结构
    │   │   └── index.wxss   # 页面样式表
    │   └── logs   # logs页面
    │       ├── logs.js      # 页面逻辑
    │       ├── logs.json    # 页面配置
    │       ├── logs.wxml    # 页面结构
    │       └── logs.wxss    # 页面样式表
    ├── project.config.json
    └── utils
        └── util.js

根目录下有3个文件: app.js、app.json、app.wxss,小程序必须有这3个描述APP的文件,并放在根目录下。这3个是应用程序级别的文件,与之平行的还有一个pages文件夹,用来存放小程序的各个页面。

我们可以和web前端开发技术做个类比:

  • wxml类似于HTML文件,用来编写页面的标签和骨架,但里面只能用小程序自己封装的组件
  • wxss类似于CSS文件,用来编写页面样式,只是把css 文件换成了wxss文件
  • js 文件类似于前端编程中的JavaScript 文件,用来编写小程序的页面逻辑
  • json文件用来配置页面的样式和行为。

以上便是微信小程序创建和结构的简单介绍,那么我们开始着手于我们的第一个项目吧!


后续内容将持续发布。

学习篇——微信小程序开发相关推荐

  1. 第十五周学习周记——微信小程序开发初步

    第十五周学习周记 前言 一.小程序简介 二.小程序代码构成 1. JSON配置 2. WXML模板 3. WXSS样式 4. JS逻辑交互 总结 前言 这一周将开始微信小程序的学习. 一.小程序简介 ...

  2. 学习(微信小程序 开发入门及案例详解 --李骏,边思编著)

    第一章 初识小程序 1.小程序不仅在商业上具备很大潜力,同时在技术上解决了一套代码多端运行和动态发版的两大痛点,用户在微信中扫一扫或搜一下即可打开具备原生体验的应用,这给开发者带来了很大的想象空间 2 ...

  3. 记一次学习微信小程序开发的心得感悟

    一句话:当你发现你自己做的工作,花了8天时间,然而其实只需要一两天时间的时候,心里挺烦,感觉自己在浪费时间. 另外,喜欢一个人在在实验室看课程放音箱,太爽了,嘻嘻嘻 这几天有发现写代码的乐趣,很开心, ...

  4. 微信小程序开发个人博客高级篇

    <span style="color:#ffffff;"> <span style="white-space: pre;"> </ ...

  5. 前端—微信小程序开发

    随着微信的普及和微小程序的广泛应用,微信小程序开发越来越多受到人们的关注,正在成为新工科和人工智能背景下当代大学生的必备技能. 适应对象 该课程适合电子信息类专业学生进行学习. 微信小程序开发课程共六 ...

  6. 微信小程序开发(十三)富文本插件wxParse的wxParseImgTap的bug修复

    在上一篇微信小程序开发(十二)富文本插件wxParse的使用中,我已经使用了wxParse插件.下午有时间就仔细的把玩了一下,发现了一个bug. 问题描述 仔细看报错,我们会发现是wxParse.js ...

  7. 微信小程序python入门教程-2020Python+微信小程序开发实战(视频+课件)

    本套课程出自老男孩IT教程的Python+微信小程序开发实战官网售价79元,课程基于微信小程序平台开发的的拍卖系统.课程分为4个章节微信小程序快速入门用微信小程序快速开发认证和发布动态模块,第二章拍卖 ...

  8. 自学微信小程序开发第二天-事件处理、数据流

    自学微信小程序开发第二天-事件处理.数据流 事件处理 绑定冒泡事件 阻止冒泡事件 互斥事件 事件传参 事件对象的属性 数据流 实例:登录页面案例 之前学习了微信小程序开发的相关环境,测试了小程序开发工 ...

  9. 微信小程序开发(4) 企业展示

    在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发企业内部宣传展示等功能. 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({o ...

  10. 微信小程序开发(3) 热门电影

    在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发热门电影及预览功能. 本文主要分为两个部分,小程序主体部分及电影主页和详情页页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成, ...

最新文章

  1. Deepin 解决google chrome卡顿的问题
  2. 飞思卡尔智能车iar工程常见问题
  3. SSO之CAS单点登录详细搭建
  4. 客座编辑:武永卫,男,博士,清华大学计算机科学与技术系教授。
  5. python中Numpy中的替代值
  6. GOF之行为型模式Ⅱ(重点)
  7. MySQL优化常见Extra分析——慢查询优化
  8. ubuntu 13.04 找回丢失的grub2
  9. Redis企业级数据备份与恢复方案
  10. 迪米特法则(Law Of Demeter)
  11. ServerStatus 云探针部署
  12. 外卖行业现状分析_2020年中国外卖行业市场现状与发展前景分析
  13. c语言程序设计 滴水视频,编程达人滴水中级班视频教程
  14. 页面向左移动动画html,jQuery仿左右窗帘拉开页面动画特效
  15. 使用Python实现QQ窗口抖动
  16. unity开发VR,没有VR设备解决方式
  17. SqlMDF数据提取工具
  18. Easy2D 轻量级游戏开发框架(1)
  19. (十九:2020.11.05)MICCAI 2020 追踪之论文纲要(译)<中>
  20. 结构体数组到底要不要分配内存

热门文章

  1. editplus3注册码
  2. CentOS 7 配置花生壳(phddns)自启动
  3. 怎么使用SSH从服务器下载文件
  4. Android实现文字和图片混排(文字环绕图片)效果
  5. python 直播源地址_斗鱼直播间真实rtmp地址获取(含工具类下载)
  6. jvm内存结构与java内存模型
  7. drools规则引擎应用笔记
  8. oracle 登录不了的解决
  9. 原生 js 生成二维码
  10. android xml 注释快捷键,xml注释(xml注释掉一段代码)