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


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 相关文章推荐
JavaScript 撑出页面文字换行
Jun 15 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 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
聊天室php&amp;mysql(一)
2006/10/09 PHP
PHP新手上路(十)
2006/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
IDEA安装vue插件图文详解
2019/09/26 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
python转换摩斯密码示例
2014/02/16 Python
Python内置数据类型详解
2014/08/18 Python
Python中运行并行任务技巧
2015/02/26 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
python 读取数据库并绘图的实例
2019/12/03 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
怎样客观的做好自我评价
2013/12/28 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle