当前位置: 首页 > 编程笔记 >

微信小程序开发的基本流程步骤

焦学海
2023-03-14
本文向大家介绍微信小程序开发的基本流程步骤,包括了微信小程序开发的基本流程步骤的使用技巧和注意事项,需要的朋友参考一下

一,微信小程序简介

1,微信小程序简称小程序,张小龙在微信公开课 Pro 上发布的小程序正式上线,时间是2017年1月9日。

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

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

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

3,微信小程序,很多类似形态的应用都采用类似的架构:

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

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

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

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

6,CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

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

二,注册微信小程序

在创建自己的微信小程序之前,首先需要注册小程序账号,有如下账号类型:

具体的注册流程,可以参考官方的简易教程

三,安装工具,创建项目

第一步:下载微信小程序开发者工具并安装,下载路径:

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

进到下载界面后,根据自己的操作系统选择相应的链接进行下载,下载完成后进行安装。

第二步:安装登录工具

开发者工具安装完成后我们就可以将其打开,初次打开会需要用微信扫码登录,如下图,用手机微信扫一扫后确认登录就可以了。

第三步:选择一个项目类型

登录成功后,如果是第一次使用该工具会弹出选择项目类型的窗口,如下图:

第四步:创建一个项目

选择项目类型成功后,会弹出创建项目的窗口,如下图:

​ 在创建过程中,如果选择的本地文件夹是个空文件夹会出来一个勾选项“建立云开发快速启动模版”,为方便初学者了解微信小程序的基本代码结构,请勾选此项,勾选后,开发者工具会帮助我们在开发目录里生成一个简单的 demo,如下图:

四,项目代码结构说明与开发

4.1,项目代码结构

点击开发者工具上侧导航的“编辑器”,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。微信小程序会读取这些文件,并生成小程序实例。

下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序。

​ 1、app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。

2、​ app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。

3、app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

我们注意到,在实例程序的代码中还有2个文件夹,一个是pages,一个是style,其中style是放通用样式的一个文件夹,pages是存放所有页面的文件夹。我们着重讲一下这个pages.

4.2,小程序页面文件构成

在这个示例中,我们有七个页面,index 页面,即欢迎页,他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。

​ index.wxml 是页面的结构文件:

<!--index.wxml-->
<view class="container">

 <!-- 用户 openid -->
 <view class="userinfo">
  <button 
   open-type="getUserInfo" 
   bindgetuserinfo="onGetUserInfo"
   class="userinfo-avatar"
   style="background-image: url({{avatarUrl}})"
  ></button>
  <view>
   <text>jackson影琪</text>
</view> 
</view> 

<view class="text-title">
   <text>Hello world</text>
</view> 
</view>

本例中使用了<view/>、<button/>、<text/>来搭建页面结构,绑定数据和交互处理函数。

​ index.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。

//index.js
const app = getApp()

Page({
 data: {
  avatarUrl: './user-unlogin.png',
  userInfo: {},
  logged: false,
  takeSession: false,
  requestResult: ''
 },

 onLoad: function() {
  if (!wx.cloud) {
   wx.redirectTo({
    url: '../chooseLib/chooseLib',
   })
   return
  }

  // 获取用户信息
  wx.getSetting({
   success: res => {
    if (res.authSetting['scope.userInfo']) {
     // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
     wx.getUserInfo({
      success: res => {
       this.setData({
        avatarUrl: res.userInfo.avatarUrl,
        userInfo: res.userInfo
       })
      }
     })
    }
   }
  })
 },

 onGetUserInfo: function(e) {
  if (!this.logged && e.detail.userInfo) {
   this.setData({
    logged: true,
    avatarUrl: e.detail.userInfo.avatarUrl,
    userInfo: e.detail.userInfo
   })
  }
 },

 onGetOpenid: function() {
  // 调用云函数
  wx.cloud.callFunction({
   name: 'login',
   data: {},
   success: res => {
    console.log('[云函数] [login] user openid: ', res.result.openid)
    app.globalData.openid = res.result.openid
    wx.navigateTo({
     url: '../userConsole/userConsole',
    })
   },
   fail: err => {
    console.error('[云函数] [login] 调用失败', err)
    wx.navigateTo({
     url: '../deployFunctions/deployFunctions',
    })
   }
  })
 },

 // 上传图片
 doUpload: function () {
  // 选择图片
  wx.chooseImage({
   count: 1,
   sizeType: ['compressed'],
   sourceType: ['album', 'camera'],
   success: function (res) {

    wx.showLoading({
     title: '上传中',
    })

    const filePath = res.tempFilePaths[0]
    
    // 上传图片
    const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]
    wx.cloud.uploadFile({
     cloudPath,
     filePath,
     success: res => {
      console.log('[上传文件] 成功:', res)

      app.globalData.fileID = res.fileID
      app.globalData.cloudPath = cloudPath
      app.globalData.imagePath = filePath
      
      wx.navigateTo({
       url: '../storageConsole/storageConsole'
      })
     },
     fail: e => {
      console.error('[上传文件] 失败:', e)
      wx.showToast({
       icon: 'none',
       title: '上传失败',
      })
     },
     complete: () => {
      wx.hideLoading()
     }
    })

   },
   fail: e => {
    console.error(e)
   }
  })
 },

})

index.wxss 是页面的样式表:

/**index.wxss**/

page {
 background: #f6f6f6;
 display: flex;
 flex-direction: column;
 justify-content: center;
}
.userinfo, .uploader, .tunnel {
 margin-top: 40rpx;
 height: 140rpx;
 width: 100%;
 background: #fff;
 border: 1px solid rgba(0, 0, 0, 0.1);
 border-left: none;
 border-right: none;
 display: flex;
 flex-direction: row;
 align-items: center;
 transition: all 300ms ease;
}

.userinfo-avatar {
 width: 100rpx;
 height: 100rpx;
 margin: 20rpx;
 border-radius: 50%;
 background-size: cover;
 background-color: white;
}

.userinfo-avatar:after {
 border: none;
}

.userinfo-nickname {
 font-size: 32rpx;
 color: #007aff;
 background-color: white;
 background-size: cover;
}

.userinfo-nickname::after {
 border: none;
}

.uploader, .tunnel {
 height: auto;
 padding: 0 0 0 40rpx;
 flex-direction: column;
 align-items: flex-start;
 box-sizing: border-box;
}

.uploader-text, .tunnel-text {
 width: 100%;
 line-height: 52px;
 font-size: 34rpx;
 color: #007aff;
}

.uploader-container {
 width: 100%;
 height: 400rpx;
 padding: 20rpx 20rpx 20rpx 0;
 display: flex;
 align-content: center;
 justify-content: center;
 box-sizing: border-box;
 border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.uploader-image {
 width: 100%;
 height: 360rpx;
}

.tunnel {
 padding: 0 0 0 40rpx;
}

.tunnel-text {
 position: relative;
 color: #222;
 display: flex;
 flex-direction: row;
 align-content: center;
 justify-content: space-between;
 box-sizing: border-box;
 border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.tunnel-text:first-child {
 border-top: none;
}

.tunnel-switch {
 position: absolute;
 right: 20rpx;
 top: -2rpx;
}

.disable {
 color: #888;
}

.service {
 position: fixed;
 right: 40rpx;
 bottom: 40rpx;
 width: 140rpx;
 height: 140rpx;
 border-radius: 50%;
 background: linear-gradient(#007aff, #0063ce);
 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 display: flex;
 align-content: center;
 justify-content: center;
 transition: all 300ms ease;
}

.service-button {
 position: absolute;
 top: 40rpx;
}

.service:active {
 box-shadow: none;
}

.request-text {
 padding: 20rpx 0;
 font-size: 24rpx;
 line-height: 36rpx;
 word-break: break-all;
}
.text-title{
margin-top: 50%;
}
.text-title text{
 font-size: 96rpx;
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

页面的样式表是非必要的。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

​ index.json 是页面的配置文件:

​ 页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。

{
 "pages": [
  "pages/index/index",
  "pages/userConsole/userConsole",
  "pages/storageConsole/storageConsole",
  "pages/databaseGuide/databaseGuide",
  "pages/addFunction/addFunction",
  "pages/deployFunctions/deployFunctions",
  "pages/chooseLib/chooseLib"
 ],
 "window": {
  "backgroundColor": "#F6F6F6",
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#F6F6F6",
  "navigationBarTitleText": "jackson影琪",
  "navigationBarTextStyle": "black"
 }
}

运行结果如下:

手机预览

​ 开发者工具上侧菜单栏,点击"预览",扫码后即可在微信客户端中体验。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍微信小程序后端(java)开发流程的详细步骤,包括了微信小程序后端(java)开发流程的详细步骤的使用技巧和注意事项,需要的朋友参考一下 微信小程序后端开发流程根据官网总结为两个步骤 1、前端调用 wx.login 返回了code,然后调用wx.getUserInfo获取到用户的昵称 头像  2、服务端根据code去微信获取openid, 接口地址: https://develope

  • 本文向大家介绍微信小程序开发(一) 微信登录流程详解,包括了微信小程序开发(一) 微信登录流程详解的使用技巧和注意事项,需要的朋友参考一下 最近在研究微信小程序开发,非常有意思的一个东西。花了一点时间写了一个微信的登录流程,包括后端接口和小程序代码。 做过微信登录的都知道,我们需要一个标识来记录用户的身份的唯一性,在微信中unionId就是我们所需要的记录唯一ID,那么如何拿到unionId就成了

  • 本文向大家介绍微信端开发--登录小程序步骤,包括了微信端开发--登录小程序步骤的使用技巧和注意事项,需要的朋友参考一下 这个小程序的主要目的是为了用户用微信的用户信息登录后将用户信息授权存入自己的数据库中,这样以后每次微信登录得到的code 所得到的 openid 可以在项目的数据库中查到该用户的相关信息。 在测试的过程中,需要用户登录得到的code,所以会用到微信开发小工具~! 该工具的使用必须

  • (以一个简单的Websocket聊天室服务端为例) 1、任意位置建立项目目录 如 SimpleChat/ 2、引入Workerman/Autoloader.php 如 require_once '/your/path/Workerman/Autoloader.php'; 3、选定协议 这里我们选定Text文本协议(WorkerMan中自定义的一个协议,格式为文本+换行) (目前WorkerMan支

  • 本文向大家介绍taro开发微信小程序的实践,包括了taro开发微信小程序的实践的使用技巧和注意事项,需要的朋友参考一下 在京东凹凸实验室开发Taro跨平台早期之前,就已经进行Taro尝鲜了。开发这个实例 猫眼电影 已经过去几个月了。案例部分使用的是猫眼电影真实线上接口,关于订座的座位数据是自己模拟实现的,案例只供参考学习。 开发环境 操作系统:Window 10 Taro版本:v0.0.69 No

  • 本文向大家介绍微信小程序云开发详细教程,包括了微信小程序云开发详细教程的使用技巧和注意事项,需要的朋友参考一下 微信小程序云开发之初体验,供大家参考,具体内容如下 小程序云开发是微信最近推出的新的一项能力,它弱化了后端以及运维的概念,开发者无需搭建服务器,使用微信平台提供的api即可完成核心的业务开发。 目前提供三大基础能力支持: 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身