微信小程序----云开发

本文介绍了微信小程序的云开发,包括新建项目、代码结构解析、配置tabBar、wxml和wxss文件详解、js页面交互,以及如何开通云服务、创建环境和使用云数据库。通过实例展示了云数据库的操作,并强调了基础库版本要求和权限控制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

新建项目

在这里插入图片描述

代码构成

  • .json: 配置文件(json文件中不能添加注释,本博客中代码片段的注释皆为方便大家理解而添加);
  • .wxml: 模板文件。相当于html,描述页面结构;
  • .wxss: 样式文件。相当于css;
  • .js: 脚本逻辑文件。写页面和用户的交互逻辑。

json配置文件

  • project.config.json: 项目配置;
  • app.json: 全局配置;
  • page.json: 页面配置。

配置tabBar

要求:

  • 两个tab页,分别为“基础”和“云开发”;
  • 点击前后图标及字体不同;
  • 为每个tab页设置自己的样式和显示的内容.

步骤:

  1. 因为两个tab页只需要两个页面,所以将pages文件夹下的所有文件及app.json里pages数组里配置的路径全部删除,只在pages里配置我们将要用到的两个页面即可。此处将两个页面命名为base和cloud。代码如下:
/*app.json*/
"pages": [
    "pages/base/base",
    "pages/cloud/cloud"
  ],

配置完成后保存此文件,将自动在pages文件夹下生成base及cloud页面及对应的文件。

2. 配置tabBar,代码如下:

/*app.json*/
"tabBar": {
    "color": "#ccc0",                          //tab字体选中前颜色
    "selectedColor": "#f00",              //tab字体选后前颜色
    "list": [{                                        //tab的列表
      "pagePath": "pages/base/base",                  
      "text": "基础",
      "iconPath": "images/calendar.png",         //点击前显示的图标
      "selectedIconPath": "images/notebook.png"   //选中后的图标
      
    },
    {
      "pagePath": "pages/base/base",
      "text": "云开发",
     "iconPath": "images/calendar.png",
    "selectedIconPath": "images/notebook.png"
    }]
  }
  1. 设置tab页的样式及内容。以cloud页面的样式为例,打开cloud.json,进行此页面导航栏背景色、字体内容及字体颜色的配置。
    在这里插入图片描述
    还有很多配置项,可阅读微信开放文档,自行尝试。

wxml结构文件

类似于html,但html里的一些标签wxml用不了,wxml有一些自己定义的组件。下面介绍常用的view及image组件。
我们所使用的小程序中的数据,大都是动态从服务端获取,然后再渲染输出到视图中显示。在wxml中显示的数据与其js文件中page的data一一对应,在wxml文件中用双大括号将变量名包起来即可获取。
下面显示字符串、图片、遍历数组的代码:

/*base.wxml*/

<view>{{msg}}</view>    //显示字符串
<image src='{{img}}'></image>  //显示图片
<view wx:for="{{arr}}">{{index}} {{item}}</view>  //遍历数组
<view wx:for="{{list}}">{{index}} {{item.name}} {{item.age}}</view> //遍历数组,显示对象的每个属性
// pages/base/base.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg: 'Hello World',  //字符串
    img: '/images/notebook.png',//图片
    arr: ['a','b','c'],//数组
    list: [{
      name: 'Cocoa',
      age: 22
    },
    {
      name: 'Keke',
      age: 20
    }
    ]
  },

运行图:
在这里插入图片描述

wxss文件

rpx

相当于css,用来描述样式。与css不同的是,这里的尺寸单位为rpx,可以根据屏幕宽度进行自适应。开发微信小程序时常用 iPhone6 作为视觉稿的标准,因为此时px与rpx的换算为1rpx = 0.5px,比较好换算。

样式导入

使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
比如在style下建一个公用样式文件common.wxss,在base.cxss中引用,代码如下

/* pages/base/base.wxss */
@import '../../style/common.wxss';

第三方样式库

微信小程序还为开发者提供了现成的样式库,比如WeUI,iView Weapp,Vant Weapp。

js页面交互

用来写交互逻辑。多阅读官网文档即可。

开通云服务

在这里插入图片描述

创建环境

每个小程序可免费创建两个环境,两个环境分别有各自独立的资源。我将环境分为“开发环境”和“生产环境”,在开发环境中进行开发测试,将所有功能测试完毕后,再上传到生产环境。
使用云开发时,要注意调试基础库的版本在2.2.3以上。调试基础库的信息可在“详情”中找到,如下图:
在这里插入图片描述

云数据库

云开发提供了一个json数据库,与传统的关系型数据库不同,此为文档型数据库。两数据库的对应关系如下表:

关系型数据库文档型数据库
数据库database数据库database
表table集合collection
行row记录record/doc
列column字段field
适用于表之间有复杂关联关系适用于有大量读写操作

数据类型

  • String: 字符串
  • Number: 数字
  • Object: 对象
  • Array: 数组
  • Bool: 布尔值
  • GeoPoint: 地理位置点
  • Date: 时间(客户端时间,而不是服务器时间)
  • Null: 占位符,表示值存在但为空

操作云数据库

  • 小程序控制(读写数据库收权限控制限制)
  • 云函数控制(拥有读写数据库权限)
  • 控制台控制(拥有读写数据库权限)

下一篇写一个云数据库增删改查demo,容我缓缓

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cocoa-k

好久没吃到肉了

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值