前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
腾讯云架构师技术同盟
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP腾讯云架构师技术同盟
返回腾讯云官网
社区首页 >专栏 >微信小程序云开发初阶-01

微信小程序云开发初阶-01

原创
作者头像
shaun
发布于 2024-10-24 10:45:44
发布于 2024-10-24 10:45:44
3660
举报

一:账号环境准备

1.申请小程序: https://mp.weixin.qq.com/wxopen/waregister?action=step1

tips:不是公众号,不是订阅号,不是企业号,别弄错了;

已有账号那就立即登录.
已有账号那就立即登录.

2.登录后台后,找到APPID,记录一下;

Warning: 一定要是小程序
Warning: 一定要是小程序

3.微信开发者工具下载:

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

按需下载稳定版本
按需下载稳定版本

4.开发工具安装:一路next,路径想换就换.

目录:自定义;

APPID:上面让你记录的;

后端服务:微信云开发;

点击创建

配置好后点击创建按钮
配置好后点击创建按钮

二:云开发快速扫盲

1.微信开发者工具打开后结构:

先展开你的项目目录,我的是workSpace;

再展开你的小程序目录,是miniprogram;

小结:

pages 存放页面的文件夹

--index首页

----index.js首页的业务逻辑

----index.json首页的配置

----index.wxml首页的模板

----index.wxss 首页的样式

--logs日志页面

utils 工具

--util.js工具js

.eslintrc.js 就是语法检测配置

app.js 小程序的入口js

app.json小程序的配置

app.wxss 小程序全局样式

project.config.json项目的配置

project.private.config.json 个人项目配置

sitemap.json站点地图(告诉微信搜索那些页面可以被收录)

2.先简单的说代码:

JSON配置: 比如app.json: 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab .

WXML模板: 和HTML类似,语法或者表达式不太一样; (更详细的文档可以参考WXML)

WXSS样式: 具有CSS的大部分特性,有些修改; (更详细的文档可以参考WXSS)

WXML事件: JS交互逻辑, 声明属性和方法,响应用户操作; (更详细的文档可以参考WXML - 事件)

3.再简单说环境和程序逻辑:

小程序的运行环境分成渲染层(WXML模板和 WXSS样式)和逻辑层(WXML事件);

这两层的通讯会由微信客户端在做中转,外部第三方服务器交互,也是微信中转;

(有关渲染层和逻辑层的详细文档参考小程序框架)

通过app.json的pages字段配置当前小程序的所有页面路径:

而写在pages字段的第一个页面就是这个小程序的首页也就是打开小程序看到的第一个页面;

Tips:

有关渲染层和逻辑层的详细文档参考小程序框架

有关于page构造器更多详细的文档参考注册页面 Page

有关组件可以参考小程序的组件

有关 API 可以参考小程序的API

三:云开发快速上手

1.在官方的quickstart上练手,先新建一个自己的页面;

  • 在pages文件夹右键建立新的文件夹
  • 在文件中右键新建页面
  • 哪个page在最上面，默认显示哪页
  • json要求严格语法，不能有多余的注释和逗号
新建shaun目录
新建shaun目录
新建shaun目录
新建shaun目录
选中目录-右键-新建Page
选中目录-右键-新建Page
shaunPage的目录结构
shaunPage的目录结构
  • shaun.wxml:抽象成前台html文件
  • shaun.js:业务逻辑
  • shaun.wxss:抽象成前台css样式
  • shaun.json:页面配置

2.把新建的页面作为quickstart的新首页

能看到,程序自动更新了app.json

app.json引入新page;
app.json引入新page;
新page,把他放到最上面,注意json格式;
新page,把他放到最上面,注意json格式;
点编译,能看到小程序的主页已经是新的了;
点编译,能看到小程序的主页已经是新的了;

最后 shaun.json中 ,页面配置一下:

代码语言：txt
复制
//允许下拉刷新
"enablePullDownRefresh":true,
//背景文字颜色
"backgroundTextStyle": "light",
//背景颜色
"backgroundColor":"#192",
//组件
"usingComponents":{}
Ctrl+s 自动编译
Ctrl+s 自动编译

3.先写一个静态的假页面,练手HTML和CSS,我们来抄绿泡泡的皮吧:

一个假的绿泡泡页面如下图:

html和css的静态页面
html和css的静态页面

HTML代码(shaun.wxml):

代码语言：txt
复制
<!--pages/shaun/shaun.wxml-->
<view class="container">
  <view class="header">
    <text class="title">微信</text>
      <view class="icons">
        <image src="/images/icons/fdj.svg" class="icon" />
        <image src="/images/icons/add.svg" class="icon" />
      </view>
  </view>

  <view class="login-status">
    <image src="/images/icons/computer.svg" class="icon" />
    <text>Windows 微信已登录</text>
  </view>

  <view class="message-list">

      <view class="message-item">
        <image src="/images/icons/jsyh.svg" class="message-icon" />
            <view class="message-content">
              <text class="message-title">中国建设银行</text>
              <text class="message-subtitle">交易提醒</text>
            </view>
        <text class="message-time">13:28</text>
      </view>

    <view class="message-item">
      <image src="/images/icons/msyh.svg" class="message-icon" />
      <view class="message-content">
        <text class="message-title">中国民生银行</text>
        <text class="message-subtitle">[链接]账户管理</text>
      </view>
      <text class="message-time">13:27</text>
    </view>
    <view class="message-item">
      <image src="/images/icons/zgyh.svg" class="message-icon" />
      <view class="message-content">
        <text class="message-title">中国银行微银行</text>
        <text class="message-subtitle">交易成功提醒</text>
      </view>
      <text class="message-time">13:25</text>
    </view>
    <view class="message-item">
      <image src="/images/icons/wjzs.svg" class="message-icon" />
      <view class="message-content">
        <text class="message-title">文件传输助手</text>
        <text class="message-subtitle">[小程序]第二赛段：包好用的出行必备礼...</text>
      </view>
      <text class="message-time">11:16</text>
    </view>
    <view class="message-item">
      <image src="/images/icons/wkzs.jpg" class="message-icon" />
      <view class="message-content">
        <text class="message-title">王卡助手</text>
        <text class="message-subtitle">月度话费账单提醒</text>
      </view>
      <text class="message-time">10:09</text>
    </view>
    <view class="message-item">
      <image src="/images/icons/jd.jpg" class="message-icon" />
      <view class="message-content">
        <text class="message-title">京东购物</text>
        <text class="message-subtitle">订单标记发货通知</text>
      </view>
      <text class="message-time">10月20日</text>
    </view>
    
    <view class="message-item">
      <image src="/images/icons/xg.jpg" class="message-icon" />
      <view class="message-content">
        <text class="message-title">西瓜催收</text>
        <text class="message-subtitle">500W已打款,剩下的再缓缓吧😟</text>
      </view>
      <text class="message-time">10月20日</text>
    </view>
    <view class="message-item">
      <image src="/images/icons/fwtz.svg" class="message-icon" />
      <view class="message-content">
        <text class="message-title">服务通知</text>
        <text class="message-subtitle">微信云开发·环境创建成功通知</text>
      </view>
      <text class="message-time">10月19日</text>
    </view>
  </view>

  <view class="footer">
    <view class="footer-item">
      <image src="/images/icons/ltpp.svg" class="footer-icon" />
      <text>微信</text>
    </view>
    <view class="footer-item">
      <image src="/images/icons/txl.svg" class="footer-icon" />
      <text>通讯录</text>
    </view>
    <view class="footer-item">
      <image src="/images/icons/znz.svg" class="footer-icon" />
      <text>发现</text>
    </view>
    <view class="footer-item">
      <image src="/images/icons/me.svg" class="footer-icon" />
      <text>我</text>
    </view>
  </view>

</view>

CSS代码(shaun.wxss):

代码语言：txt
复制
/* pages/shaun/shaun.wxss */

/* 全局样式 */
page {
    font-family: 'Arial', sans-serif;
  }
  
  /* 容器样式 */
/* 页面容器 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 占据视口的全部高度 */
  box-sizing: border-box; /* 边框盒模型 */
}

/* 头部样式 */
.header {
  display: flex;
  justify-content: space-between; /* 左右两端对齐 */
  align-items: center;
  width: 100%; /* 确保占据全部宽度 */
  padding: 10px;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e5e5;
}

.header .title {
  font-size: 18px;
  font-weight: bold;
  color: #000000;
  flex-grow: 1; /* 让标题扩展以占据剩余空间 */
  text-align: center; /* 文本居中 */
}

.header .icons {
  display: flex;
  gap: 20px; /* 为图标之间添加间距 */
}

.header .icon {
  width: 24px;
  height: 24px;
}

/* 登录状态样式 */
.login-status {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  width: 100%; /* 确保占据全部宽度 */
}

.login-status .icon {
  width: 24px;
  height: 24px;
  margin-right: 10px; /* 图标与文字之间的间距 */
}

/* 消息列表样式 */
.message-list {
  flex: 1; /* 占据可用空间 */
  padding: 10px;
  overflow-y: auto; /* 当内容超出时，出现滚动条 */
  width: 100%; /* 确保占据全部宽度 */
}

.message-item {
  display: flex;
  align-items: center;
  padding: 8px;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e5e5;
}

.message-item .message-icon {
  width: 32px;
  height: 32px;
  margin-right: 8px;
}

.message-item .message-content {
  flex: 1; /* 占据可用空间 */
  display: flex;
  flex-direction: column; /* 垂直堆叠 */
  justify-content: space-between; /* 内容垂直分布 */
  padding: 8px; /* 添加内边距 */
}

.message-item .message-title {
  font-size: 16px;
  color: #000000;
}

.message-item .message-subtitle {
  font-size: 14px;
  color: #888888;
  flex: 1; /* 占据可用空间 */
  white-space: pre-wrap; /* 保留空格并允许换行 */
  display: -webkit-box; /* 使用弹性盒子 */
  -webkit-line-clamp: 2; /* 最多显示两行 */
  -webkit-box-orient: vertical; /* 垂直方向 */
  overflow: hidden; /* 隐藏超出的部分 */
  word-break: break-all; /* 断开长单词 */
}

.message-item .message-time {
  font-size: 12px;
  color: #888888;
}

/* 底部样式 */
.footer {
  display: flex;
  justify-content: space-between; /* 均匀分布四个项目 */
  align-items: center;
  padding: 10px;
  background-color: #ffffff;
  border-top: 1px solid #e5e5e5;
  border-radius: 0 0 10px 10px; /* 只影响底部两个角 */
  position: fixed; /* 固定定位 */
  bottom: 0; /* 置于底部 */
  left: 0;
  right: 0; /* 横向占据全部 */
  
}

.footer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer .footer-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 5px; /* 图标与文字之间的间距 */
}

4.下节课再说添加js,完成简单的交互.

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

热点技术征文第十期1024程序员节
云开发开箱挑战赛

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

热点技术征文第十期1024程序员节
云开发开箱挑战赛
#热点技术征文第十期1024程序员节
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
目录
  • 一:账号环境准备
    • 1.申请小程序: https://mp.weixin.qq.com/wxopen/waregister?action=step1
    • 2.登录后台后,找到APPID,记录一下;
    • 3.微信开发者工具下载:
    • 4.开发工具安装:一路next,路径想换就换.
  • 二:云开发快速扫盲
    • 1.微信开发者工具打开后结构:
    • 2.先简单的说代码:
    • 3.再简单说环境和程序逻辑:
  • 三:云开发快速上手
    • 1.在官方的quickstart上练手,先新建一个自己的页面;
    • 2.把新建的页面作为quickstart的新首页
    • 3.先写一个静态的假页面,练手HTML和CSS,我们来抄绿泡泡的皮吧:
    • 4.下节课再说添加js,完成简单的交互.
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论