创造你的第一个微信小程序:简单易懂的入门指南

这篇具有很好参考价值的文章主要介绍了创造你的第一个微信小程序:简单易懂的入门指南。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 微信小程序开发

1.1 介绍

小程序是一种新的开放能力,开发者可以快速地开发一个小程序。可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

官方网址:https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

小程序主要运行微信内部,可通过上述网站来整体了解微信小程序的开发。

首先,在进行小程序开发时,需要先去注册一个小程序,在注册的时候,它实际上又分成了不同的注册的主体。我们可以以个人的身份来注册一个小程序,当然,也可以以企业政府、媒体或者其他组织的方式来注册小程序。那么,不同的主体注册小程序,最终开放的权限也是不一样的。比如以个人身份来注册小程序,是无法开通支付权限的。若要提供支付功能,必须是企业、政府或者其它组织等。所以,不同的主体注册小程序后,可开发的功能是不一样的。

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

然后,微信小程序我们提供的一些开发的支持,实际上微信的官方是提供了一系列的工具来帮助开发者快速的接入
并且完成小程序的开发,提供了完善的开发文档,并且专门提供了一个开发者工具,还提供了相应的设计指南,同时也提供了一些小程序体验DEMO,可以快速的体验小程序实现的功能。

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

最后,开发完一个小程序要上线,也给我们提供了详细地接入流程。

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

1.2 准备工作

开发微信小程序之前需要做如下准备工作:

  • 注册小程序
  • 完善小程序信息
  • 下载开发者工具

1). 注册小程序

注册地址:https://mp.weixin.qq.com/wxopen/waregister?action=step1

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

2). 完善小程序信息

登录小程序后台:https://mp.weixin.qq.com/

两种登录方式选其一即可

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言
创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

完善小程序信息、小程序类目

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

查看小程序的 AppID

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

3). 下载开发者工具

下载地址: https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

扫描登录开发者工具

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

创建小程序项目

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

熟悉开发者工具布局

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

设置不校验合法域名

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

:开发阶段,小程序发出请求到后端的Tomcat服务器,若不勾选,请求发送失败。

1.3 入门案例

1.3.1 小程序目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

文件说明:

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

app.js:必须存在,主要存放小程序的逻辑代码

app.json:必须存在,小程序配置文件,主要存放小程序的公共配置

app.wxss: 非必须存在,主要存放小程序公共样式表,类似于前端的CSS样式

对小程序主体三个文件了解后,其实一个小程序又有多个页面。比如说,有商品浏览页面、购物车的页面、订单支付的页面、商品的详情页面等等。那这些页面会放在哪呢?
会存放在pages目录。

每个小程序页面主要由四个文件组成:

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

文件说明:

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

js文件:必须存在,存放页面业务逻辑代码,编写的js代码。

wxml文件:必须存在,存放页面结构,主要是做页面布局,页面效果展示的,类似于HTML页面。

json文件:非必须,存放页面相关的配置。

wxss文件:非必须,存放页面样式表,相当于CSS文件。

1.3.2 编写和编译小程序

1). 编写

进入到index.wxml,编写页面布局

<view class="container">
  <view>{{msg}}</view>
   <view>
    <button type="default" bindtap="getUserInfo">获取用户信息</button>
    <image style="width: 100px;height: 100px;" src="{{avatarUrl}}"></image>
    {{nickName}}
  </view>
   <view>
    <button type="primary" bindtap="wxlogin">微信登录</button>
    授权码:{{code}}
  </view>
   <view>
    <button type="warn" bindtap="sendRequest">发送请求</button>
    响应结果:{{result}}
  </view>
</view>

进入到index.js,编写业务逻辑代码

Page({
  data:{
    msg:'hello world',
    avatarUrl:'',
    nickName:'',
    code:'',
    result:''
  },
  getUserInfo:function(){
    wx.getUserProfile({
      desc: '获取用户信息',
      success:(res) => {
        console.log(res)
        this.setData({
          avatarUrl:res.userInfo.avatarUrl,
          nickName:res.userInfo.nickName
        })
      }
    })
  },
  wxlogin:function(){
    wx.login({
      success: (res) => {
        console.log("授权码:"+res.code)
        this.setData({
          code:res.code
        })
      }
    })
  },
  sendRequest:function(){
    wx.request({
      url: 'http://localhost:8080/user/shop/status',
      method:'GET',
      success:(res) => {
        console.log("响应结果:" + res.data.data)
        this.setData({
          result:res.data.data
        })
      }
    })
  }})

2). 编译

点击编译按钮

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

3). 运行效果

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

点击获取用户信息

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

点击微信登录

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

点击发送请求

因为请求http://localhost:8080/user/shop/status,先要启动后台项目。

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

:设置不校验合法域名,若不勾选,请求发送失败。

1.3.3 发布小程序

小程序的代码都已经开发完毕,要将小程序发布上线,让所有的用户都能使用到这个小程序。

点击上传按钮:

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

指定版本号:

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

上传成功:

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

把代码上传到微信服务器就表示小程序已经发布了吗?
其实并不是。当前小程序版本只是一个开发版本。

进到微信公众平台,打开版本管理页面。

创造你的第一个微信小程序:简单易懂的入门指南,苍穹外卖项目,spring boot,redis,微信小程序,后端,java,开发语言

需提交审核,变成审核版本,审核通过后,进行发布,变成线上版本。

一旦成为线上版本,这就说明小程序就已经发布上线了,微信用户就可以在微信里面去搜索和使用这个小程序了。

后记
👉👉💕💕美好的一天,到此结束,下次继续努力!欲知后续,请看下回分解,写作不易,感谢大家的支持!! 🌹🌹🌹
文章来源地址https://www.toymoban.com/news/detail-753495.html

到了这里,关于创造你的第一个微信小程序:简单易懂的入门指南的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序开发:如何从零开始建立你的第一个小程序

    你可能有一个小程序的想法,但它仍然是一个想法。对于开发人员来说,这是一项艰巨的任务,因为你必须确保你有足够的时间来开发你的第一个小程序。如果你决定使用小程序,那就有很多事情要做。创建一个小程序可能是一件非常耗时的事情。除了创建一个自己的小程序

    2024年02月10日
    浏览(24)
  • 微信小程序实现一个简单的登录功能

    微信小程序实现一个简单的登录功能。包括一个登录页面和一个用户信息展示页面。在登录页面中输入用户名和密码,点击登录按钮进行验证,如果验证成功,则跳转到用户信息展示页面,并展示用户的信息(例如用户名和头像)。如果验证失败,则提示登录失败信息。 在上

    2024年02月03日
    浏览(13)
  • 简单分享下怎么创建一个微信小程序

    怎么创建一个微信小程序?三招教你这样做!!微信小程序不会做没关系,看我这篇文章就够啦!!实现0基础到大神的瞬间飞跃不是梦!! 戳下方链接即可直达官网,上千种行业精美模板任君挑选,快一起来试试吧!让小程序制作不再困难!上千个行业精美模板等你来挑,拖拽式搭建小

    2024年02月13日
    浏览(13)
  • 关于微信小程序生成海报一个简单的办法

    废话不多说,直接入题,先上GITHUB地址,这个组件很好用,有图形生成工具,你不用再自己写代码一个个元素对齐了,是不是很爽。 GITHUB:https://github.com/Kujiale-Mobile/Painter ​​​​​​​React App 这个很好用吧,自己把设计变成海报,然后复制出代码 充分利用painter的优势。

    2024年01月22日
    浏览(29)
  • 【AI的未来 - AI Agent系列】【MetaGPT】0. 你的第一个MetaGPT程序

    《MetaGPT智能体开发入门》开课,跟着课程,学习MetaGPT智能体开发。 请确保你的系统已安装Python 3.9+。你可以通过以下命令进行检查: 下面是具体的安装命令: 安装命令 如果想安装特定版本 如果想更新最新的版本和使用最新功能 想看源代码,使用源代码 更多安装教程可参

    2024年01月25日
    浏览(16)
  • 真的简单,单手用Spring Boot 开发一个微信小程序

      嗨,大家好,现在微信使用的用户很多,作为开发人员也可以建立一个自己的微信小程序,本期与大家分享一下作者建立微信小程序的开发流程。   百度搜索微信公众号平台,然后扫码登录注册一个微信公众号,   进入申请页面之后,需要及时完善小程序相关信息

    2024年02月10日
    浏览(17)
  • Java生成微信小程序二维码,5种实现方式,一个比一个简单

    先介绍一下 项目场景 ,主要是通过微信小程序二维码 裂变分享 ,每个账号有专属邀请二维码,分享出去,有新人扫码入驻,就可以得到现金奖励或红包奖励。当然,产品设计会更丰富,不止有裂变模式,还有渠道推广模式,还有各种奖励规则,但核心实现都是生成二维码。

    2024年02月03日
    浏览(14)
  • 如何在微信小程序中生成二维码:一个最简单的案例就让你明白

    使用weapp.qrcode.js 在 微信小程序 中,快速生成二维码     下载weapp-qrcode代码 然后 将 dist 目录下的weapp.qrcode.esm.js 复制到项目目录中(这里是utils目录下) 1、小程序wxml文件 创建 canvas,并定义好 width, height, canvasId 2、小程序js代码 非常简单的案例,onLoad函数直接生成二维码 运

    2024年02月12日
    浏览(14)
  • 微信小程序-常用视图容器类组件[图文并茂 通俗易懂]

    目录 view scroll-view swiper和swiper-item text rich-text button image 普通视图区域 块级元素 类似HTML的div 使用效果: 代码展示: list.wxml list.wxss 可滚动的视图区域 常用来实现滚动列表的效果 使用效果: 代码展示: list.wxml list.wxss  轮播图容器组件 和 轮播图 item组件 更多了解属性 使用效果

    2024年02月09日
    浏览(13)
  • 构建你的第一个Android应用

    一、Android的核心组件 Android是一种基于Linux的开源操作系统,主要用于移动设备,如智能手机和平板电脑。Android的设计目标是为用户提供一个统一、灵活和丰富的用户体验,同时保持开放性和兼容性。 Android的核心组件 包括: 应用程序框架:提供了一套用于开发和运行应用程

    2024年02月01日
    浏览(14)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包