一, 微信小程序简介
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://developers.weixin.qq.com/miniprogram/dev/
三, 安装工具, 创建项目
第一步: 下载微信小程序开发者工具并安装, 下载路径:
进到下载界面后, 根据自己的操作系统选择相应的链接进行下载, 下载完成后进行安装.
第二步: 安装登录工具
- <!--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>
- //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**/
- 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;
- }
- {
- "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"
- }
- }
来源: https://www.cnblogs.com/jackson-zhangjiang/p/9843696.html