精华内容
下载资源
问答
  • 程序开发
    万次阅读 多人点赞
    2021-08-24 09:10:51

    所有示例的完整代码,都可以从 GitHub 的代码仓库下载。

    一、小程序是什么?

    学习小程序之前,先简单说一下,它到底是什么。

    字面上讲,小程序就是微信里面的应用程序,外部代码通过小程序这种形式,在微信这个手机 App 里面运行。

    但是,更准确的说法是, 小程序可以视为只能用微信打开和浏览的网站。 小程序和网页的技术模型是一样的,用到的 JavaScript 语言和 CSS 样式也是一样的,只是网页的 HTML 标签被稍微修改成了 WXML 标签。所以,小程序页面本质上就是网页。

    小程序的特殊之处在于,虽然是网页,但是它不支持浏览器,所有浏览器的 API 都不能使用,只能用微信提供的 API。这也是为什么小程序只能用微信打开的原因,因为底层全变了。

    二、小程序的优势

    小程序最大的优势,就是它基于微信。

    微信 App 的功能(比如拍照、扫描、支付等等),小程序大部分都能使用。微信提供了各种封装好的 API,开发者不用自己实现,也不用考虑 iOS 和安卓的平台差异,只要一行代码就可以调用。

    而且,开发者也不用考虑用户的注册和登录,直接使用微信的注册和登录,微信的用户自动成为你的用户。

    三、知识准备

    由于小程序基于网页技术,所以学习之前,最好懂一点网页开发。具体来说,下面两方面的知识是必需的。

    (1)JavaScript 语言:懂基本语法,会写简单的 JS 脚本程序。

    (2)CSS 样式:理解如何使用 CSS 控制网页元素的外观。

    此外,虽然 HTML 标签和浏览器 API 不是必备知识,但是了解浏览器怎么渲染网页,对于理解小程序模型有很大的帮助。

    总的来说,先学网页开发,再学小程序,是比较合理的学习途径,而且网页开发的资料比较多,遇到问题容易查到解决方法。但是,网页开发要学的东西太多,不是短期能掌握的,如果想快速上手,先学小程序,遇到不懂的地方再去查资料,也未尝不可。

    四、开发准备

    小程序开发的第一步,是去微信公众平台注册,申请一个 AppID,这是免费的。

    申请完成以后,你会得到一个 AppID(小程序编号) 和 AppSecret(小程序密钥),后面都会用到。

    然后,下载微信提供的小程序开发工具。这个工具是必需的,因为只有它才能运行和调试小程序源码。

    开发者工具支持 Windows 和 MacOS 两个平台。我装的是 Windows (64位)的版本,这个教程的内容也是基于该版本的,但是 MacOS 版本的操作应该是完全一样的。

    安装好打开这个软件,会要求你使用微信扫描二维码登录。

    登录后,进入新建项目的页面,可以新建不同的项目,默认是新建小程序项目。

    点击右侧的+号,就跳出了新建小程序的页面。

    如果直接新建小程序,会生成一个完整的项目脚手架。对于初学者来说,这样反而不利于掌握各个文件的作用。更好的学习方法是,自己从头手写每一行代码,然后切换到"导入项目"的选项,将其导入到开发者工具。

    导入时,需要给小程序起一个名字,并且填写项目代码所在的目录,以及前面申请的 AppID。

    五、 hello world 示例

    下面,就请大家动手,跟着写一个最简单的小程序,只要五分钟就能完成。

    第一步,新建一个小程序的项目目录。名字可以随便起,这里称为wechat-miniprogram-demo

    你可以在资源管理器里面,新建目录。如果熟悉命令行操作,也可以打开 Windows Terminal(没有的话,需要安装),在里面执行下面的命令,新建并进入该目录。

    
    > mkdir wechat-miniprogram-demo
    > cd wechat-miniprogram-demo
    

    第二步,在该目录里面,新建一个脚本文件app.js。这个脚本用于对整个小程序进行初始化。

    app.js内容只有一行代码。

    
    App({});
    

    上面代码中,App()由小程序原生提供,它是一个函数,表示新建一个小程序实例。它的参数是一个配置对象,用于设置小程序实例的行为属性。这个例子不需要任何配置,所以使用空对象即可。

    第三步,新建一个配置文件app.json,记录项目的一些静态配置。

    app.json采用 JSON 格式。JSON 是基于 JavaScript 语言的一种数据交换格式,只有五条语法规则,非常简单,不熟悉 JSON 的同学可以参考这篇教程

    app.json文件的内容,至少必须有一个pages属性,指明小程序包含哪些页面。

    
    {
      "pages": [
        "pages/home/home"
      ]
    }
    

    上面代码中,pages属性是一个数组,数组的每一项就是一个页面。这个示例中,小程序只有一个页面,所以数组只有一项pages/home/home

    pages/home/home是一个三层的文件路径。

    1. 所有页面都放在pages子目录里面。
    2. 每个页面有一个自己的目录,这里是pages下面的home子目录,表示这个页面叫做home。页面的名字可以随便起,只要对应的目录确实存在即可。
    3. 小程序会加载页面目录pages/home里面的home.js文件,.js后缀名可以省略,所以完整的加载路径为pages/home/homehome.js这个脚本的文件名也可以随便起,但是习惯上跟页面目录同名。

    第四步,新建pages/home子目录。

    
    $ mkdir -p pages/home
    

    然后,在这个目录里面新建一个脚本文件home.js。该文件的内容如下。

    
    Page({});
    

    上面代码中,Page()由小程序原生提供,它是一个函数,用于初始化一个页面实例。它的参数是一个配置对象,用于设置当前页面的行为属性。这里是一个空对象,表示不设置任何属性。

    第五步,在pages/home目录新建一个home.wxml文件。WXML 是微信页面标签语言,类似于 HTML 语言,用于描述小程序的页面。

    home.wxml的内容很简单,就写一行hello world

    
    hello world
    

    到这一步,就算基本完成了。现在,打开小程序开发工具,导入项目目录wechat-miniprogram-demo。如果一切正常,就可以在开发者工具里面,看到运行结果了。

    点击工具栏的"预览"或"真机调试"按钮,还可以在你的手机上面,查看真机运行结果。

    这个示例的完整代码,可以到代码仓库查看。

    六、WXML 标签语言

    上一节的home.wxml文件,只写了最简单的一行hello world。实际开发中,不会这样写,而是要加上各种标签,以便后面添加样式和效果。

    小程序的 WXML 语言提供各种页面标签。下面,对home.wxml改造一下,加上两个最常用的标签。

    
    <view>
      <text>hello world</text>
    </view>
    

    上面的代码用到了两个标签:<view><text>

    <view>标签表示一个区块,用于跟其他区块分隔,类似 HTML 语言的<div>标签。<text>表示一段行内文本,类似于 HTML 语言的<span>标签,多个<text>标签之间不会产生分行。

    注意,每个标签都是成对使用,需要有闭合标记,即标签名前加斜杠表示闭合,比如<view>的闭合标记是</view>。如果缺少闭合标记,小程序编译时会报错。

    由于我们还没有为页面添加任何样式,所以页面的渲染效果跟上一节是一样的。后面添加样式时,大家就可以看到标签的巨大作用。

    七、小程序的项目结构

    总结一下,这个示例一共有4个文件,项目结构如下。

    
    |- app.json
    |- app.js
    |- pages
       |- home
          |- home.wxml
          |- home.js
    

    这就是最简单、最基本的小程序结构。所有的小程序项目都是这个结构,在上面不断添加其他内容。

    这个结构分成两层:描述整体程序的顶层 app 脚本,以及描述各个页面的 page 脚本。

    八、项目配置文件 app.json

    顶层的app.json文件用于整个项目的配置,对于所有页面都有效。

    除了前面提到的必需的pages属性,app.json文件还有一个window属性,用来设置小程序的窗口。window属性的值是一个对象,其中有三个属性很常用。

    • navigationBarBackgroundColor:导航栏的颜色,默认为#000000(黑色)。
    • navigationBarTextStyle:导航栏的文字颜色,只支持black(黑色)或white(白色),默认为white
    • navigationBarTitleText:导航栏的文字,默认为空。

    下面,改一下前面的app.json,加入window属性。

    
    {
      "pages": [
        "pages/home/home"
      ],
      "window": {
        "navigationBarBackgroundColor": "#ff0000",
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "小程序 Demo"     
      }
    }
    

    上面代码中,window属性设置导航栏的背景颜色为红色(#ff0000),文本颜色为白色(white),标题文字为"小程序 Demo"。

    开发者工具导入项目代码,就可以看到导航栏变掉了。

    这个示例的完整代码,可以到代码仓库查看。

    除了窗口的样式,很多小程序的顶部或尾部,还有选项栏,可以切换到不同的选项卡。

    这个选项栏,也是在app.json里面设置,使用tabBar属性,这里就不展开了。

    如果你看到了结尾,说明真的对小程序开发非常感兴趣。今天就讲到这里,下一篇教程将讲解如何设置基本的页面样式,做出用户界面 UI。

    (完)

    作者: 阮一峰

    https://www.ruanyifeng.com/blog/2020/10/wechat-miniprogram-tutorial-part-one.html

    更多相关内容
  • 程序开发入门

    万人学习 2018-09-21 21:24:57
    2020年12月最新最全的零基础小程序实战入门,零基础入门微信小程序开发。10天带领大家上线一款属于自己的微信小程序。微信小程序开发入门视频教程,该课程从微信小程序注册到官方开发工具、官方Demo、再到开发个人专...
  • 微信小程序开发视频教程全套

    千次下载 热门讨论 2017-12-14 12:57:52
    微信小程序(wei xin xiao cheng xu),简称小程序,缩写XCX,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。 全面开放申请后,主体...
  • 零基础入门微信小程序开发

    万次阅读 多人点赞 2018-07-03 02:45:07
    目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装、小程序发布等内容,...

    课程介绍

    本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装、小程序发布等内容,共 9 篇文章。

    本课程共包含四个部分。

    第一部分(第1-3篇)带你初步了解小程序是什么,然后进行小程序开发的准备工作,从注册账号到安装开发工具一应俱全。工欲善其事,必先利其器。

    第二部分(第4-6篇)。面向入门级读者介绍小程序构成的各个部分。您不需要事前准备任何知识,需要掌握的会进行说明,需要扩展的会提供信息的出处。千里之行始于足下。

    第三部分(第7-8篇)通过指南针的例子,介绍一个小程序的实现过程。通过这个实例,综合运用所学知识,使小程序开发能力进一步提高。麻雀虽小,五脏俱全。

    第四部分(第9篇)只包含一篇文章,具体介绍小程序发布的过程。使读者能够对小程序开发的全过程有一个完整的了解。编筐编篓,全在收口。

    哪怕您事先没有任何微信小程序相关技术的经验,认真学完该达人课之后,您会掌握基本的小程序开发方法,并具备自主扩展知识面,以及进行更高层次开发的能力。

    点击查看课程全部内容

    作者介绍

    薛卫国,现就职于某外企担任架构小组责任人,CSDN 博客专家,长期从事 C++ 开发,精通 UML、设计模式,创办有公众号《面向对象思考》。毕业于东北大学,曾留校在国家重点实验室工作。

    课程内容

    第01课:初识微信小程序

    要火的节奏

    最近有一则来自北京商报的新闻引起了不少人的注意,我们这里选取一部分:

    争夺流量 手机厂商“抱团”对抗微信小程序

    3月20日,小米、中兴、华为等10家手机厂商联合对外宣布,推出基于手机硬件平台的新型应用生态“快应用”及相关标准。在微信小程序用户规模日益壮大、硬件利润微薄的背景下,本次快应用的推出被看做是手机厂商与腾讯争夺流量与利益的举动。业内人士认为,对于整个市场来说,流量竞争有促进作用,但微信已经具有较强的用户黏性,十大手机厂商要想争夺用户流量并非易事。

    估计这些厂家的标准出台还需要一段时间,但是有一点可以确定的是:小程序类的开发要火。

    但如果你打开轻应用的文档可以发现两点:

    1.应用文档的信息量还很有限。2.轻应用的架构,采用的技术和微信小程序很相似。

    处于这个目的,作者赶在这个时机制作了本课程,希望可以为潮流加一份力;作为程序员,希望各位可以通过本课程的学习,在有限的时间内为自己添一份技能!

    参考资料:轻应用开发文档

    什么是小程序?

    最近一个小游戏“跳一跳”火得不得了,相信即使您自己没有玩过,身边的亲戚朋友也一定玩过。画面大致如下:

    当然了,关于玩法等等不是本文的内容,可以参照百度百科

    这就是微信小程序的成功案例了。

    微信小程序简介

    微信小程序简称小程序,张小龙在微信公开课 Pro 上发布的小程序正式上线,时间是2017年1月9日。关于小程序,张小龙在他的公开课中有过很详细的说明,大家尽可以到网上去搜,这里不再赘述,只说作者自己的理解。

    微信小程序这个词可以分解为“微信”和“小程序”两部分。

    其中“微信”可以理解为“微信中的”,指的是小程序的执行环境;当然微信在提供执行环境的同时也延长了用户使用微信的时间。

    “小程序”是说它首先是程序,然后具备轻便的特征。小程序并不像其他应用那样,它不需要安装,而是通过扫描二维码等打开后直接执行;用完以后也不需要卸载。这就是所谓用完即走的原则。

    另外,微信不会提供类似于小程序商店的地方,需要小程序提供者自己通过二维码,群分享的手段来传播,这就是所谓去中心化的形态。

    微信朋友圈提供了好友之间沟通信息的手段,订阅号提供了面向粉丝推送信息的手段,而小程序则是提供了用户通过自己的操作而与服务实现互动的手段。

    小程序相关技术介绍

    本课程的目标读者群是了解基本的 C/C++ 语法但对小程序开发完全没有经验的程序员,因此在说明微信小程序的同时,对相关技术也将进行相应的介绍。通过这种方式,可使读者能够非常顺利地学习,而无需到处寻找资料导致忘了学习微信小程序这个本来的目的。

    微信小程序推出一年多一点的时间,算是一个新事物,但是利用的技术却都是已经存在的技术。如果你稍加调查就会发现,不光是微信小程序,很多类似形态的应用都采用类似的架构:

    1. 使用 JSON 技术来表现应用的配置信息。包含应用的基本信息,页面配置和路由,应用全体的信息等。
    2. 使用经过定制 CSS+XML 技术来实现视图层的描述。画面元素,例如列表、按钮、文本框、选择框等都通过 XML 语言来描述,遵从 XML 语法,对于页面的共同风格,使用 CSS 进行定义。
    3. 使用 JavaScript 语言来实现逻辑层结构。包括用户操作的处理,系统 API 的调用等。
    4. 架构在视图层和逻辑层之间提供数据和事件传输功能,从而尽量减少难度。由于类似应有都属于轻应用,所以提供的功能都比较单一。

    具体的语法,用途等将会在使用的时候详细介绍,这里只提一下相关技术的基本情况,了解即可。

    换一种说法就是:并不需要另外自己调查,跟着本课程走下去就好。

    JSON

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于 ECMAScript(W3C 制定的 JavaScript 规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

    XML

    XML(Extensible Markup Language),中文名为可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言。

    在电子计算机中,标记指计算机所能理解的信息符号,通过此种标记,计算机之间可以处理包含各种的信息,比如文章等。它可以用来标记数据、定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言。它非常适合万维网传输,提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。是 Internet 环境中跨平台的、依赖于内容的技术,也是当今处理分布式结构信息的有效工具。早在1998年,W3C 就发布了 XML1.0 规范,使用它来简化 Internet 的文档信息传输。

    CSS

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

    CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

    JavaScript

    JavaScript 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    在1995年时,由 Netscape 公司的 Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为 Netscape 与 Sun 合作,Netscape 管理层希望它外观看起来像 Java,因此取名为 JavaScript。但实际上它的语法风格与 Self 及 Scheme 较为接近。

    为了取得技术优势,微软推出了 JScript,CEnvi 推出 ScriptEase,与 JavaScript 同样可在浏览器上运行。为了统一规格,再加上 JavaScript 兼容于 ECMA 标准,因此也称为 ECMAScript。

    学习方法

    微信小程序虽然是新事物,但学习方法却不是新方法。

    我们的套路是:首先生产一个最简单的小程序实例,通过这个实例介绍微信小程序的构造和想法,这算是学习这个活动中“学”的部分。然后扩展这些知识点,通过开发一个简单的小程序的过程来运用这些知识点,这算是“习”的过程。

    这是作者这些年来屡试不爽的方法。

    参考资料

    在学习和开发的过程中,我们主要会参考微信的开发文档。其原因是小程序太新了,相应的知识储备还不够丰富。虽然也可以找到一些开发方面的书籍,但是说实话,内容并不比微信本身的开发文档更详尽。

    第02课:开发环境的准备

    创建自己的小程序账号

    在开发自己的微信小程序之前,首先需要注册小程序账号,接下来我们一步一步做详细说明。

    打开浏览器,输入:mp.weixin.qq.com。

    因为是第一次使用,所以选择画面右上角的“立即注册”。

    选择左下角的“小程序”方框。

    输入邮箱、密码、确认密码、验证码,之后选择同意协议和条款。当然这里的密码不是邮箱的密码,而是正在申请的小程序账号的密码。

    最后按下“注册”按钮。

    点击“登录邮箱”按钮。打开相应的软件后,应该可以收到下面的邮件。如果没收到的话,建议看一下垃圾邮件,没准儿那里有。

    单击下半部一大片绿色的部分,就可以回到注册界面继续剩下的工作。

    选择主题类型为“个人”,然后输入管理员的姓名,身份证号码。

    输入手机号码并单击“获取验证码”,将手机接收到的验证码输入到短信验证码栏中。

    完成上述步骤,画面下部会出现一个二维码,需要用已经绑定银行卡的微信的扫一扫功能扫描该二维码进行实名认证。

    如果认证成功,画面会变成下面这个样子。

    点击“继续”按钮。

    意思就是现在后悔还来得及,如果不后悔今后就没法后悔了。我们按下“确定”按钮。

    大功告成!

    小程序管理平台

    账号申请成功之后,就可以登录“微信公众平台 | 小程序”了。在目前这个时间点虽然并不需要马上做什么。本文接下来将对其中重要的菜单功能做简单介绍。

    首页

    内容比较简单,主要是表示小程序的实时访问次数和系统公告。

    开发管理

    用户在使用小程序的时候,需要扫描二维码进入。而这个二维码需要开发者将小程序上传到腾讯服务器之后从腾讯取得。上传过程便在该页面上完成。

    过程也不复杂,一共分为三步:上传代码,提交审核和发布小程序。

    用户身份

    这个画面用来指定小程序项目的管理员和项目成员。其中项目成员又包括开发者和体验者。

    数据分析

    这个画面可以统计小程序的访问数量,对用户来源、性别、年龄分布等进行分析。

    模板消息

    这个画面可以定制微信小程序向客户发送的消息。

    客服消息

    通过这个画面可以指定小程序的客服人员,从而实现小程序的在线客服功能。

    附近的小程序

    当小程序的主体为企业、政府、媒体及其他组织时可以开通此功能。此功能有效时,小程序指定地点以后,用户可以通过微信的“附近的小程序”界面发现该小程序。

    运维中心

    一共有两个页面,分别用于查询小程序的错误日志和对客户端进行监控。

    推广

    用来自定义小程序推广关键字。

    设置

    设置分类中一共有五个页面,这里只介绍前两个。

    基本设置

    顾名思义,这里主要是用来设置小程序的基本信息。内容包括:

    1. 设定小程序名称,小程序头像;
    2. 取得小程序码;
    3. 取得认证;
    4. 设定主题信息;
    5. 其他省略。

    开发设置

    这个页面主要负责和小程序开发相关的设定信息,内容包括:

    1. 取得小程序 ID。每一个发布的小程序都需要唯一的 ID。
    2. 生成小程序秘钥。
    3. 指定服务器域名。小程序可以访问外部网站,可以上传和下载文件。但是对象服务器不是任意的,需要在这里指定。
    4. 其他省略。

    其他

    在画面的右上角,有两个链接“文档”和“社区”分别可以进入小程序开发文档和社区。在实际的学习过程中可以积极利用。

    安装开发工具

    小程序账号申请成功之后的工作就是准备开发环境。

    早期的版本在首页分类中有开发工具的下载链接,最近不知道为什么变成了访问次数统计画面。但是没有关系,可以直接点击这里,便可打开下面的下载地址页面。

    根据操作系统选择合适的下载链接。

    下载完成后打开安装程序,首先是开始画面。

    按下“下一步”按钮。

    按下“我接受”按钮。

    指定适当的安装目录后按下“安装”按钮。

    安装中……

    完成!

    接下来就可以开始微信小程序的开发之旅啦!

    第03课:微信开发者工具介绍

    第04课:小程序构成介绍——配置文件的形式和内容

    第05课:小程序构成介绍——WXML 和 WXSS

    第06课:小程序构成介绍——事件处理和数据绑定

    第07课:小程序开发实例——指南针(上)

    第08课:小程序开发实例——指南针(下)

    第09课:发布小程序

    点击查看课程全部内容

    展开全文
  • 微信小程序入门 前言 随着科技的不断进步,很多功能将会开放,那么很多需求也将会因为现实而得到满足,这是一种不需要下载和安装就可以使用的应用软件。用户只需扫描和搜索就可以打开应用程序。它很容易使用,而且...

    微信小程序入门



    前言

    随着科技的不断进步,很多功能将会开放,那么很多需求也将会因为现实而得到满足,这是一种不需要下载和安装就可以使用的应用软件。用户只需扫描和搜索就可以打开应用程序。它很容易使用,而且很容易实现。小程序带来了巨大的流量,吸引了很多大的人和企业家前来追踪,也显示出它强大的生命力。小程序是下一个被确定为互联网新品种的程序,信已经成为不可缺少的交流工具,小程序依附于微信,用户搜索起来也会更方便,其实这就是小程序发展的前景和优势。

    提示:以下是本篇文章正文内容,下面案例可供参考

    一、小程序的概述

    1.小程序简介

    微信小程序也被简称为小程序,其英文名称是Mini Program。
    它是一种存在于微信内部的轻量级应用程序。
    微信研发团队在其官方网页上有一段关于微信小程序的介绍:“小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。”
    小程序的几个重要特点:无需下载安装、用完即走、随时可用。

    2.小程序诞生

    微信小程序于2017年1月9日正式发布,当天在微信的“发现”页面出现小程序入口。 往前追溯十年——2007年1月9日正好是第一代iPhone手机正式发布。

    3.小程序功能

    小程序页 | 对话分享 | 搜索查找 | 公众号关联
    线下扫码 | 消息通知 |历史列表 | 小程序切换

    4.小程序创建步骤

    1.注册 开发者需要首先在微信公众平台上进行小程序账号注册。 2.信息完善 开发者注册完毕后需要填写小程序的基本信息。 3.开发 下载开发工具进行小程序的开发与调试工作。 4.提交审核与发布 完成小程序后需要进行代码上传,然后由管理员提交代码等待微信团队审核,审核通过后即可正式发布。

    二、小程序的准备工作

    1.注册开发者账号

    步骤1

    开发者首先需要在微信公众平台上注册一个小程序账号才能进行后续的代码开发与提交工作。
    访问微信公众平台官网首页(mp.weixin.qq.com),然后单击右上角的“立即注册”按钮进入账号类型选择页面。

    单击右上角的“立即注册”按钮步骤2

    在当前页面上选择注册的账号类型为“小程序”,即可进入小程序的正式注册页面。
    选择注册的账号类型为“小程序”
    步骤3

    小程序的正式注册页面包含三个填写步骤:账号信息、邮箱激活、信息登记。
    正式注册页面包含三个填写步骤

    步骤4

    邮箱激活提醒
    登录对应的注册邮箱查看激活邮件,单击邮件正文中的链接地址会跳转回到微信平台页面完成账号激活。

    邮箱激活提醒

    步骤5

    邮箱账号激活完成后就进入了信息登记页面。
    其中注册国家/地区保持默认内容“中国大陆”,然后根据实际情况进行主体类型的选择。

    信息登记页面
    信息登记页面

    步骤6

    选择“个人”类型之后在页面下方会自动出现主体信息登记表单。

    主体信息登记表单

    步骤7

    扫码后手机微信会自动跳转到微信验证页面。
    检查微信验证页面上所显示的姓名和身份证号码,确认无误后点击“确定”按钮会提示身份验证成功。

    身份验证

    步骤8

    单击“继续”按钮进行下一步,系统会跳出一个提示框让开发者进行最后的确认。
    单击“确定”按钮完成主体信息确认。
    主体信息确认

    2.小程序信息完善

    步骤1

    小程序名称
    由于小程序名称不允许与平台内已经存在的其他账号名称重名,在填写好之后可以先自测一下是否符合要求,单击右侧的“检测”按钮即可进行验证。

    步骤2

    小程序头像
    也就是小程序最终显示的图标logo,图片最后会被切割为圆形效果。头像图片的格式只能是:bmp、jpeg、jpg或gif其中的一种,并且文件大小不得大于2M。注意头像图片不允许涉及政治敏感与色情内容。头像图片每个月可修改5次。

    小程序头像设置

    步骤3

    小程序介绍
    可以由开发者自由填写关于小程序功能的描述,注意介绍内容不得含有国家相关法律法规禁止的内容。小程序介绍的内容每个月可以申请修改5次。
    小程序介绍填写

    步骤4

    小程序类目
    小程序服务类目指的是小程序主要内容所属的服务范围。特殊行业需要额外提供资质证明。服务类目每个月只可以修改1次。
    服务类目的下拉表单分为两级,每级都必须填写不可以为空。

    小程序类目填写

    步骤5

    全部填写完毕后,就可以单击最下方的“提交”按钮提交小程序的基本信息。
    此时单击“添加开发者”按钮就可以进行小程序成员管理了。
    提交小程序的基本信息

    3.成员管理

    1. 成员类型说明:
      项目成员可以被分配的不同权限解释如下:
      a. 开发者:可以使用微信开发者工具进行小程序开发,也可以预览开发版小程序在手机端的效果;
      b. 体验者:可以在手机端使用体验版小程序;
      c. 登录:无需管理员确认即可登录小程序管理后台;
      d. 数据分析:可以使用小程序数据分析功能查看小程序数据;
      e. 开发管理:拥有小程序提交审核、发布和回退权限;
      f. 开发设置:拥有设置小程序服务器域名、消息推送以及扫描普通链接二维码打开小程序的权限;
      g. 暂停服务设置:拥有暂停小程序线上服务的权限。

    2. 成员人数限制:
      个人类型的小程序允许管理员添加15个开发者,其中5个开发者,10个体验者。
      其他类型的小程序开发者数量限制如下:
      未认证未发布组织类型:30人;
      已认证未发布/未认证已发布组织类型:60人;
      已认证已发布组织类型:90人。

    3. 成员变更说明
      每个小程序的管理员与项目成员都是允许变更的。需要注意的是,每个微信号作为项目成员最多可以参与到50个小程序中。

    三、小程序的开发工具

    步骤1

    软件下载与安装开发者登录小程序管理页面后台,然后单击右上角菜单栏中的“开发”选项即可切换到小程序开发工具的下载页面,也可以直接通过URL地址访问下载页面:(https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html)。
    步骤2

    确认无误后可以双击该文件进行开发者工具的安装。
    开发者工具的安装
    开发者工具的安装
    开发者工具的安装
    开发者工具的安装

    3.其他辅助工具

    1. 小程序官方文档
      小程序官网提供了技术文档供开发者学习,文档会更新各类小程序接口的用法。希望第一时间了解小程序有了哪些更新的读者可以关注。
      官方文档访问地址:https://developers.weixin.qq.com/miniprogram/dev/

    2. 微信开放社区
      微信开放社区中有一个开发者专区可以搜索常见问题和解答,也可以在遇到问题时上去提问,和其他开发者一起交流学习。
      开发者社区访问地址:https://developers.weixin.qq.com/

    3. 小程序开发助手
      可以使用小程序开发者助手方便快捷的预览和体验线上版本、体验版本以及开发版本。开发者可以扫一扫开发者助手小程序码来使用相关功能。

    四、推荐小程序(欢迎各位大佬指导)

    智慧云工具箱

    展开全文
  • 2021年最全教程!微信小程序开发详解

    万次阅读 多人点赞 2021-09-29 16:01:42
    个人版更多只是一个展示的平台,企业版可以作为一个完整的平台,个人版不可以做商业性质的小程序,但是企业版可以,个人版不可以开通微信支付。 附近的小程序不显示个人版,只能通过搜索,扫码方式找到。 个人版不...

    一、前期准备工作

    1、注册微信小程序开发者账号

    在官网注册页选择小程序注册即可,账号分为个人版和企业版:
    个人版相对于企业版注册流程更为简单和宽松。

    企业版注册需要支付认证费用,一般为300元,个人版不需要,企业版经过微信官方认证,更具有信誉度。
    个人版更多只是一个展示的平台,企业版可以作为一个完整的平台,个人版不可以做商业性质的小程序,但是企业版可以,个人版不可以开通微信支付。
    附近的小程序不显示个人版,只能通过搜索,扫码方式找到。
    个人版不支持快速获取微信用户的手机号。

    强烈推荐有一定基础的同学去微信开发平台官方网站
    https://developers.weixin.qq.com/community/homepage
    在这里插入图片描述

    2、下载微信开发者工具

    微信平台官网提供的开发工具,选择适合自己系统的版本下载最新版即可。开发小程序优先选择,喜欢用其他软件如vscode,webstorm也可以(仅适合代码生成后编写代码),打包上传等仍需要开发者工具。
    在详细介绍小程序历史和技术细节前,请先跟随我们的步骤完成开发Hello World例子。
    具体步骤:

    第一步,请前往**https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html**
    微信开发者工具下载页面根据自己的操作系统下载对应的安装包进行安装。

    第二步,打开微信开发者工具,选择新建小程序项目,我们先不需理解AppID的概念,新建项目时选择无AppID,并取消勾选“建立普通快速启动模板”的选项。

    最后一步,我们来添加必要的代码。

    在根目录下创建app.json,其内容如下。
    在这里插入图片描述
    在根目录下新建pages目录,然后在pages目录下新建index目录,接着在index目录下创建两个文件index.wxml和index.js。

    index.wxml的内容如下所示。 Hello World

    index.js的内容如下所示。Page({})

    通过编写以上短短的几行代码,微信开发者工具的模拟器界面上显示出Hello World。

    二、小程序开发

    新建一个初始小程序项目
    在这里插入图片描述
    根据项目需求建立即可,appId在官网设置里可以看到或者使用测试号进行开发(后续有了小程序账号修改对应appId即可),点击新建即可创建一个新的小程序模板。
    下图为微信开发工具页面,默认左边为开发页面展示,右边上方为代码编辑区,下方为控制台,可用来调试和查看开发过程中所需信息(开发者工具也可以用来访问微信公众号页面网页,用来查看http请求或者报错信息,前提是必须拥有开发者权限)。
    在这里插入图片描述

    开发工具常用功能介绍

    编译:点击编译即可进行编译,默认每次修改保存后都会实时编译。可以修改每次编译条件:在这里插入图片描述
    真机调试:生成一个二维码,微信扫码即可真机调试(必须处在一个网络下);
    版本管理:git可视化工具;
    上传:如果appid为正式id,则会有上传按钮,将小程序上传到微信服务器(仅上传编译后项目,不是源代码,源代码仍需要单独保存管理)
    上传后在微信小程序官网控制版本,具体流程为:
    开发工具上传>官网版本管理体验版自动更新>提交体验版本审核>等待审核通过>提交审核通过版本;

    小程序目录结构
    在这里插入图片描述
    默认目录结构如上图,分为主体部分和各个页面:
    主体部分:
    app.js: 小程序初始化js;
    app.json: 小程序配置文件,如:导航,窗口,各页面引入;
    app.wxss: 小程序公共样式;
    各个页面:
    Pages:各个子页面以js+json+wxml+wxss组成,方便管理,右边可快捷生成page;
    小程序遵循MVC结构(Model View Controller),js为页面逻辑(C&M),wxss为页面样式,修饰wxml的DOM元素,wxml为页面机构(V),json为页面配置(具体API可见微信官方文档,可以修改此页面标题等,也充当了部分M);

    App.JSON介绍

    App.json为小程序较为重要的配置文件,也从充当了类似其他框架中的路由功能。在这里插入图片描述
    部分字段如图所示,这里只介绍最基础常用的配置字段:
    Pages:每一个子页面都需要写到这个数组里,其实就是路由引入;
    Window:系统配置,包括标题,标题颜色,标题背景等(如果不设置分页面配置则默认全覆盖);
    Tabbar:官方提供的导航功能,可以设置导航栏,list为导航数组,存放导航项、color为字体颜色、selectedcolor为选中颜色、backgroundcolor为背景颜色;
    App.js介绍
    在这里插入图片描述
    此图为简单的微信登录获取openid的例子,获取到对应id自行与用户绑定;
    也可自定义全局函数。

    globaldata为全局变量
    如果要使用请在对应page.js引入:const app = getApp();
    WXML,WXSS,JS
    WXML等同于html,需要注意的是元素名全部为微信新定义的,需要注意的是不存在传统的div、span、p等元素,取而代之的是view,text等,部分元素与html名字相同,但是用法不同,需要自行前往官网文档查看;

    WXSS等同于CSS,具体无太大变化,仅需注意目前不支持less或者sass,如果坚持使用less和sass需要使用vscode下载插件进行开发,后续转为wxss即可;

    JS类似VUE的结构

    上方可以引入其他文件,Page({})为实例对象,data为页面需要的数据(双向绑定),下方为函数,需要注意每一个函数之间需要用,隔开。Page.js具体语法和原生js并无太大区别,仅需注意部分API如缓存,页面跳转等微信API即可(官网查看),值得一提的是,如果你想要使用TypeScript开发,请在项目初始化时开发语言处选择TS,则项目会构建为TS模板(默认为JS);
    小程序拥有自己的生命周期如下图所示:
    在这里插入图片描述
    可以根据该图示选择自己需要的生命周期钩子函数即可;

    路由方式
    在这里插入图片描述
    需要注意:
    在这里插入图片描述
    在这里插入图片描述

    三、常见问题和解决方法

    1、在当前页面如何修改其他页面数据?
    var page=getCurrentPages();
    page[0].data.btn=true;
    该函数返回一个当前页面栈,从中找到对应页面即可;

    2、为什么我想切换到主页,使用wx.navigateTo不生效?
    可能是配置了tabbar,tabbar页面只能用switchTab跳转;

    3、如何修改当前页面title?
    在对应page.json中修改,示例:
    {
    “usingComponents”: {},
    “navigationBarBackgroundColor”: “#ffffff”,
    “navigationBarTextStyle”: “black”,
    “navigationBarTitleText”: “快乐大抽奖”,
    “backgroundColor”: “#eeeeee”,
    “backgroundTextStyle”: “light”

    4、小程序页面栈最多10层

    **5、redirectTo关闭当前页面跳转,**navigateto是当前页面保存到栈跳转,首页跳转建议使用navigateto

    6、小程序审核问题
    小程序审核需要1-7天完成,一年一次加急审核机会(工作日2小时以内审核完成)。

    展开全文
  • 零基础入门微信小程序开发 (2020 版)

    万次阅读 多人点赞 2020-02-19 23:30:02
    专栏亮点 零基础学习,初学者轻松...专栏通过 9 篇文章覆盖从开发账号注册、开发工具安装、小程序开发,到发布的全过程。 基于最新环境,让你不走弯路 小程序作为新兴技术,无论是开发文档,还是开发工具都在飞速变...
  • 程序开发文档

    万次阅读 多人点赞 2019-02-21 17:48:24
    程序开发总结 用 Markdown编辑器 所展示的 最近领导交给一个任务,单独开发一个小程序项目,还要出一篇小程序课题文档。这也是我第一次接触小程序,遂把领导对课题的要求以及自己开发过程中遇到的问题做如下总结:...
  •  微信小程序开发成本构成:  1、首先是开发人员的成本:UI、前端开发、后端开发、测试等。  2、如果要定制型微信小程序:首先要着手看商户的需求,电商的用户注册、登录,产品拜访,购物车,下单购买,支付功能...
  •   互联网巨头们都热衷于搭建平台,希望能够打造自己的生态,依靠生态公司开发各种各样的应用来满足...但只有微信小程序支持个人开发者,其他小程序均需要企业认证,顾本特辑只能以微信小程序为例,结合小编自己开发
  • 微信小程序开发总结与心得(一)

    万次阅读 多人点赞 2019-02-25 14:54:34
    最近的工作重心一直在小程序,也开发了几个小程序,对小程序开发的流程及相关技术相对比较熟悉,在开发过程中也总结了一些心得经验、了解一些小程序文档上没有的东西、踩了一些坑。所以想着写篇文章记录下来,并借此...
  • 微信小程序开发进阶篇(mpvue)

    千次阅读 2022-02-15 21:27:21
    微信小程序开发基础篇 一、初识微信小程序 1、什么是微信小程序 Ⅰ-小程序历史 2017 年度百度百科十大热词之一 微信小程序,简称小程序,英文名 Mini Program,是一种不需要下载安装即可使用的应用 (张小龙对其的...
  • c语言程序开发的步骤

    万次阅读 2021-05-19 14:37:35
    c语言程序开发的步骤如下:1、定义程序目标。在开始写程序之前,应对希望程序要做什么有一个清晰的想法。考虑程序需要的信息,程序需要进行的计算和操作,以及程序应该向你报告的信息。在这一规划阶段,应该用一般...
  • 微信小程序开发需要哪些技术?

    千次阅读 2021-11-16 11:38:50
    第一种就是自己通过编写小程序代码进开发制作,第二种就找专业的小程序开发公司进行开发制作小程序。第三种方式是不需要技术代码也不需要程序开发公司。自己就可以使用拖拽式组件出自己的小程序。通俗明白的一讲就像...
  • 微信小程序开发工具使用方法

    千次阅读 2021-12-06 10:44:44
    安装微信小程序开发工具 第一步注册微信公众号https://mp.weixin.qq.com/ 注册类型选择小程序。 输入信息完成注册。 安装微信小程序开发工具 微信小程序 开发工具包下载 (ionic.wang) 下载合适自己的...
  • 一、设置界面颜色皮肤 二、模拟器的设置 三、代码放大和缩小快捷键 Ctrl+-:代码字体缩小 ctrl++:代码字体放大
  • 做任何程序开发要首先找到其官方文档,我们先来看看其有哪些官方文档。 微信小程序开发文档链接为:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html,如下图: 这里就是做微信小程序开发的全部官方文档。...
  • MFC程序开发参考大全 源码

    热门讨论 2013-04-25 15:25:04
    系统内核对象,MFC链接库,串口程序开发,网络程序开发,Internet程序开发,程序调试与异常处理,Visual C++ 2005介绍,C++托管扩展编程等。书中各部分内容由浅入深,逐步让读者掌握MFC编程的知识、方法和技巧,是...
  • 微信WIFI小程序开发

    千次阅读 2022-02-17 16:26:20
    WIFI小程序开发板功能与添加过程
  • 微信小程序开发【前端+后端(java)】

    万次阅读 多人点赞 2018-07-13 22:19:46
    现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发过微信小程序,最终自己的毕业设计也是开发一个微信小程序。所以现在用这篇博客记录我之前开发的...
  • 微信小程序的一些入门介绍。
  • 文章目录一、开发前准备1. 开发文档2. 工具安装3....小程序开发文档: https://developer.work.weixin.qq.com/document/path/91502 点击企业微信小程序开发进入详情页面 2. 工具安装 微信开发者工具 3. .
  • Python+微信小程序开发(一)了解和环境搭建

    千次阅读 多人点赞 2021-10-21 21:02:29
    一、小程序介绍 ...3.如何开发程序? 小程序:学习微信开发的语言(前端html、css、js、vue.js) 微信开发者工具 API:restful接口(Python+django+drf框架) pycharm 二、环境搭建.
  • 10分钟入门 - 微信小程序开发

    万次阅读 多人点赞 2019-01-09 21:33:14
    注册微信小程序 如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择 “小程序” 即可。 接着填写...
  • Flutter教程之Windows桌面应用程序开发

    万次阅读 2021-12-18 14:50:42
    一、前言 Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。...本文主要讲如何使用Flutter来进行Windows桌面应用程序开发
  • app.json里删除"lazyCodeLoading": “requiredComponents” 解决问题。
  • 微信小程序
  • 微信小程序开发图片太多怎么办

    千次阅读 2022-03-16 19:50:12
    程序开发过程,图片数量多,将图片存储在本地可能会超过代码包的限制。常用的存储方式是将图片传到服务器上,但并不是每个开发者都有自己的服务器,可以使用开发工具里的云开发。 1、点击 云开发 2、将需要用的...
  • 10小时零基础入门小程序开发

    千人学习 2019-08-20 08:51:19
    由浅入深,零基础快速入门小程序开发。通过10小时的学习,你也可以上线一款属于自己的微信小程序。 本课是《手把手带你零基础入门小程序》系列课程的一节,如果你想快速入门小程序开发,想学习小程序云开发,可以...
  • 毕业设计之 --- 微信小程序开发

    千次阅读 多人点赞 2020-10-31 10:45:24
    近期有不少同学毕设涉及微信小程序开发, 但是基础的环境部署都不会, 面对一大堆资料无从下手, 希望学长能出一篇文章介绍一下微信小程序开发的基础知识. 准备工作 申请账号 进入小程序注册页 根据指引填写信息和提交...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,419,533
精华内容 1,767,813
关键字:

程序开发

友情链接: XComboList.rar