qt插件开发框架搭建_微信小程序MINA框架（基本介绍、环境搭建、项目搭建、组件化开发）...

最新推荐文章于 2024-04-29 17:56:13 发布

weixin_39950764

最新推荐文章于 2024-04-29 17:56:13 发布

阅读量1.1k

点赞数

文章标签： qt插件开发框架搭建

基本介绍
环境搭建
- python环境
- 工具和文档
项目搭建
- 项目结构
- 项目配置
- 项目逻辑
- 页面结构
- 页面样式
组件化开发

微信小程序

1. 基本介绍

什么是微信小程序？

- 移动互联网时代，手机。 
- 手机软件，在手机上中安装很多软件。
- 腾讯和阿里（只安装自己不用别人）
	- 腾讯：微信 + N小程序
	- 阿里：支付宝 + N小程序

为什么要做小程序？

微信用户基数大。将近12亿用户。
在微信上用我们小程序会比较便捷。免安装，免卸载。

如何开发小程序？

小程序：学习微信开发的MINA框架（前端html、css、js、vue.js）
- 微信开发者工具
- API：restful接口（Python+django+drf框架）。
- pycharm

2. 环境的搭建

2.1 Python环境

虚拟环境
- django
- drf

pycharm

微信公众平台申请帐号：https://mp.weixin.qq.com/wxopen/waregister?action=step1

自己使用一个之前没有用于微信开发的邮箱即可。

完成注册：

登录效果（个人账号）：

登录效果（企业账号）：

记录AppID

开发→开发设置->AppID

2.2 工具和文档

开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/

开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3. 项目搭建

安装并打开微信开发者工具，选择左侧小程序，并点击白色 ➕ 创建小程序。

指定下项目目录，尽量使用英文目录，不要有多余空格。填写下AppID。最后点击右下方“创建“。

完成小程序的创建。

3.1 项目结构

└─ / ··················项目根目录
   ├─ pages/ ·············· 页面目录
   │  ├─ index/ ············ index页面
   │  │  ├─ index.js ········· index页面逻辑
   │  │  ├─ index.json ········ index页面配置
   │  │  ├─ index.wxml ········ index页面结构
   │  │  └─ index.wxss ········ index页面样式
   │  └─ logs/ ············· logs页面
   │     ├─ logs.js ·········· logs页面逻辑
   │     ├─ logs.json ········· logs页面配置
   │     ├─ logs.wxml ········· logs页面结构
   │     └─ logs.wxss ········· logs页面样式
   ├─ utils/ ·············· 项目公共代码/插件目录
   │  └─ util.js ············ 工具脚本
   ├─ app.js ··············· 项目公共逻辑
   ├─ app.json ·············· 项目公共配置
   └─ app.wxss ·············· 项目公共样式

3.2 项目配置

小程序中的配置文件分为两种：

全局配置文件，根目录下的app.json。是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
页面配置文件，每个page页面目录下的json文件。用于指定特定页面工作时，window的设置，调用组件。

3.2.1 全局配置

文档地址：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

我们可以设置一个tab栏效果，图标放置到项目根目录下statics目录中，图标可以在笔记素材中找到，app.json代码：

{
  "pages": [
    "pages/index/index",
    "pages/home/home"
  ],
  // 应用程序窗口设置
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "小程序",
    "navigationBarTextStyle":"white"
  },
  // 应用导航栏设置
  "tabBar": {
    "selectedColor":"#CD5C5C",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/ic_menu_choice_nor.png",
        "selectedIconPath": "static/tabbar/ic_menu_choice_pressed.png"
      },
      {
        "pagePath": "pages/home/home",
        "text": "我的",
        "iconPath": "static/tabbar/ic_menu_me_nor.png",
        "selectedIconPath": "static/tabbar/ic_menu_me_pressed.png"
      }
    ]
  },
  // 网络超时设置
  "networkTimeout": {},
  // 是否在控制台输出调试信息
  "debug": true,
  "style": "v2"
}

3.2.2 页面配置

pages/home/home.json，

{
  // 导航条背景色
  "navigationBarBackgroundColor": "#35495e",
  // 导航条前景色（只能是white/black）
  "navigationBarTextStyle": "white",
  // 导航条文本
  "navigationBarTitleText": "我的",
  // 窗口背景颜色
  "backgroundColor": "#fff",
  // 窗口前景色
  "backgroundTextStyle": "dark",
  // 是否开启下拉刷新
  "enablePullDownRefresh": true,
  // 组件列表
  "usingComponents": {}
}

3.3 项目逻辑

3.3.1 公共逻辑文件

小程序项目提供了公共逻辑文件，即项目根目录下的app.js。它用于创建应用程序对象并提供给我们用于设置整个项目的一些公共方法和公共数据，当应用程序启动时会自动执行项目目录下的app.js文件。在app.js中通过调用全局App({参数选项})方法创建一个应用程序例。通过参数指定的一些特定的方法，会在特定的执行时机去执行，也就是说通常所说的生命周期事件方法，类似之前的vue的生命周期。

也可以在这里定义全局的自定义方法和自定义属性，这些成员可以在内部直接使用，或者外部通过获取app对象调用：

app.js，代码：

//app.js
App({
  // 应用程序启动时触发一次
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  // 全局数据对象（可以整个应用程序共享）
  globalData: {
    userInfo: null,
    // 自定义全局数据
    message:"hello python",
  },
  // 自定义全局方法
  show_message(message){
     // ....
  },
  // 当应用程序进入前台显示状态时触发
  onShow () { ... },

  // 当应用程序进入后台状态时触发
  onHide () { ... }
})

在各个页面文件中，调用全局数据或者全局方法/属性，按如下操作js操作：

var app = getApp()
app.globalData.message
app.show_message("python")

3.3.2 页面逻辑文件

js文件是一个页面的重要组成部分，用于创建页面对象

// 获取全局应用程序对象
const app = getApp()

// Page也是一个全局函数，用来创建页面对象
Page({
  // 页面数据对象，可以在视图中调用，完成数据绑定和显示
  data: { ... },

  // 页面方法，可以用于加载数据，也可以用于定义事件处理函数
  method1 () { ... },
  method2 (p1, p2) { ... },

  // 生命周期方法
  // 页面加载触发
  onLoad () { ... }

  ...
})

在应用程序执行到当前页面时，会执行当前页面下对应的js页面逻辑文件。在js逻辑文件中可通过调用全局Page({参数选项})方法创建一个页面实例。参数选项说明

3.4 页面结构

WXML（WeiXin Markup Language）是MINA框架设计的一套标签语言，基于XML。指代的是pages目录下各个页面结构文件，结合一些基础组件、事件系统、模板数据绑定，可以构建出页面的结构。

wxml ≈ xml + 模板引擎 + 事件系统

WXML 中的动态数据均来自对应 Page 的 data属性的数据。

3.4.1 常用标签

text
编写文本信息，类似于span标签
view
容器，类似于div标签
image
图片

3.4.2 模板引擎

显示内容

<view> {{message}} </view>
Page({
  data: {
    message: 'Hello MINA!'
  }
})

标签属性(需要在双引号之内)

<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }
})

控制属性(需要在双引号之内)

<view wx:if="{{condition}}"> </view>
Page({
  data: {
    condition: true
  }
})

关键字(需要在双引号之内)

true：boolean 类型的 true，代表真值。

false： boolean 类型的 false，代表假值。

<checkbox checked="{{false}}"> </checkbox>

特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值

运算

可以在 {{}} 内进行简单的运算，支持的有如下几种方式：

三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

算数运算

<view> {{a+b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

view中的内容为 3 + 3 + d。

字符串运算

<view>{{"hello" + name}}</view>
Page({
  data:{
    name: 'MINA'
  }
})

输出数组或对象的单个成员

<view>{{object.key}} {{array[0]}}</view>
Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

逻辑判断

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名。

使用 wx:for-index 可以指定数组当前下标的变量名。

3.5 页面样式

小程序中提供了app.wxss和页面目录下的wxss文件给我们指定结构标签的样式外观。由wxss中的来控制页面地外观。其中，页面样式会覆盖全局样式的效果，全局样式会给每一个页面都共享样式。

因为MINA框架本身提供了大量的预设组件和预设样式，所以强烈建议不要在页面样式使用ID或者属性，伪类选择符，尽量只采用class来标记样式。

3.5.1 全局样式

尽量编写一些公共的基本样式即可，例如样式的初始化，例如公共部分的样式。

3.5.2 页面样式

pages目录下每个页面都有属于自己的样式文件，这个文件中编写的样式只能当前页面使用，其他页面无法使用的。

4. 组件化开发

从小程序基础库版本1.6.3开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本1.6.3以上版本。

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

4.1 创建组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）.

例如，在项目根目录下创建一个组件目录components，然后再创建一个user组件，下面包含4个文件，分别是：

└─ / ···························· 项目根目录
   ├─ components/ ······················ 组件总目录
   │  ├─ user/ ······················   组件子目录
   │  │  ├─ user.js ··················· 组件页面逻辑
   │  │  ├─ user.json ·················· 组件页面配置
   │  │  ├─ user.wxml ·················· 组件页面结构
   │  │  └─ user.wxss ·················· 组件页面样式

components-name.json代码：

{
  "component": true,
  "usingComponents": {}
}

然后再打开user.wxml结构文件编写简单的页面内容。

组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。

在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。

<!-- 组件模板 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>

注意：在组件中不应使用ID选择器、属性选择器和标签名选择器。
slot在下面用

4.2 调用组件

在pages下面的json页面配置中，通过如下代码导入组件：

{
  "usingComponents": {
    "my-component": "/components/components-name/components-name"
  }
}

在页面结构中，就可以通过my-components标签直接调用组件。

<!-- 引用组件的页面模版 -->
<view>
  <my-component>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
     <view>这里是插入到组件slot中的内容</view> 
  </my-component>
</view>

具体演示

在根目录下创建一个components文件夹，在这个文件夹下面创建一个user文件夹，再在user文件夹下面创建cpmponent

然后在user.wxml里面写代码

<!--components/user/user.wxml-->
<text>components/user/user.wxml</text>

<view>用户子组件==============><slot></slot></view>

在home/home.json写代码

{
  "usingComponents": {
    // 组件名字：组件路径
    "userCom": "/components/user/user"
  },

在home/home.wxml里面去调用

<view>
  <userCom></userCom>
</view>

这里切换到home的时候，可以看到component里面的东西被调用到home里面了。

再接着我们使用slot

首先在home/home.wxml书写参数

<view>
  <userCom>{{123}}</userCom>
</view>

这个123就是参数

那么我们去components里面的user去接收参数

<!--components/user/user.wxml-->
<text>components/user/user.wxml</text>
<view>用户子组件==============><slot></slot></view>

那么这个slot就起到了接受参数的作用，结果如下：