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


Posted in Javascript onJanuary 31, 2019

一,微信小程序简介

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"
 }
}

运行结果如下:

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

手机预览

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
location.search在客户端获取Url参数的方法
Jun 08 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
layui 给数据表格加序号的方法
Aug 20 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
layui table 多行删除(id获取)的方法
Sep 12 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
JSON的parse()方法介绍
Jan 31 #Javascript
JSON.stringify()方法讲解
Jan 31 #Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 #Javascript
vue中的mvvm模式讲解
Jan 31 #Javascript
Vue和React组件之间的传值方式详解
Jan 31 #Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 #Javascript
async/await优雅的错误处理方法总结
Jan 30 #Javascript
You might like
常用星际术语索引(新手指南)
2020/03/04 星际争霸
php读取msn上的用户信息类
2008/12/05 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
python dumps和loads区别详解
2020/02/04 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
在校生党员自我评价
2013/09/25 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
爱情保证书大全
2014/04/29 职场文书
导航工程专业自荐信
2014/09/02 职场文书
2016教师国培研修感言
2015/12/08 职场文书
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android
Redis分布式锁的7种实现
2022/04/01 Redis