小程序-随记

weixin_44970015

已于 2022-08-22 16:42:52 修改

阅读量112

点赞数

分类专栏：小程序文章标签：微信小程序小程序前端

于 2022-08-18 11:28:19 首次发布

本文链接：https://blog.csdn.net/weixin_44970015/article/details/126401213

版权

小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了微信小程序的运行环境、特点和架构，强调了其无需安装、用完即走的特性。小程序使用JSON进行配置，CSS+XML实现界面描述，JS负责逻辑层。还提到了JSON的数据交换作用，XML的标记语言特性，以及CSS和JS在小程序中的角色。文章详细阐述了小程序的注册流程，并解析了项目中app.js、app.json、app.wxss和pages目录的用途。

摘要由CSDN通过智能技术生成

流程

小程序简介
- 微信可以理解为微信中的，指的是小程序中的执行环境；当然微信在提供执行环境的同时也延长了用户使用微信的时间
- 小程序是说它首先是程序，然后具备轻便的特征，并不像其他应用那样，它不需要安装，而是通过扫描二维码打开后执行，用完也不需要卸载，即用完即走的原则
- 使用JSON技术来表现应用的配置信息，包含应用的基本信息，页面配置和路由，应用全体的信息等
- 使用经过定制CSS+XML技术来实现图层的描述，画面元素，例如列表、按钮、文本框、选择框等都通过XML语言来描述，遵从XML语法，对于页面的共同风格，使用CSS进行定义
- 使用JS语言来实现逻辑层架构，包括用户操作的处理，系统API的调用
- 架构在视图层和逻辑层之前提供数据和事件传输功能，类似的都属于轻应用，所以提供的功能都比较单一
- JSON是一种轻量级别的数据交换合适，基于ECMAScript（W3C指定的JacaScript规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据
- XML可扩展标记语言（w3c）
- css 表现html或者XML文件样式的计算机语言
- js 直译式脚本语言，它的解释器被称为js引擎，是浏览器的一部分（广泛用于客户端的脚本语言），最早在HTML网页上使用，用来给HTML增加动态功能
注册流程可参考：
- https://blog.csdn.net/u013253075/article/details/124005508
项目代码结构说明与开发
- 初始化项目中包含的文件
  （1）app.js
  小程序的脚本代码，可以在这个文件中监听并处理小程序的生命周期函数，声明全局变量
  调用框架提供的丰富的API（比如，同步存储，读取本地数据）
  （2）app.json
  对整个小程序的全局配置，可以在这个文件中配置小程序是由哪些页面组成
  配置小程序的窗口背景色，配置导航条样式，配置默认标题
  注：文件不可添加任何注释
  （3）app.wxss是整个小程序的公共样式表，可以在页面组件的class上直接使用里面声明的样式
  （4）pages
  –index
  微信小程序中的每一个页面的 ‘ 路径+页面名’ 都需要写在app.json的pages中，且pages中的第一个页面时小程序的首页
  每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，
  .js后缀的文件时脚本文件
  .json后缀的配置文件
  .wxss后缀的时样式表文件
  .wxml后缀的文件是页面结构文件
```xml

jackson影琪 Hello world ```

//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)
      }
    })
  },
 
})

						 页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 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"
  }
}

			--
* 开发者工具上侧菜单栏，点击"预览"，扫码后即可在微信客户端中体验
![在这里插入图片描述](https://img-blog.csdnimg.cn/00138238fdf94b868dd16bdd81864591.png)

* tips：小程序中我们常用的布局组件是view。通过布局组件就可以实现我们想要的效果
		-- 
*