小程序基础与实战案例

标签: 前端

小程序开发工具与基础

小程序开发准备:

  1. 申请小程序账号( appid )
  2. 下载并安装微信开发者工具

具体步骤如下:

  • 先进入 微信公众平台 ,下拉页面,把鼠标悬浮在小程序图标上
    在这里插入图片描述
  • 然后点击 小程序开发文档
    在这里插入图片描述
  • 照着里面给的步骤,就可以申请到小程序账号了。
  • 然后就可以下载 开发者工具
  • 下载完打开后的界面就是这个样子
    在这里插入图片描述
    下面让我们来新建一个小程序开发项目:
    在这里插入图片描述

在AppID输入自己刚刚注册的AppID就可以,或者使用测试号,创建后的页面是这样的:
在这里插入图片描述

编写第一个小程序页面

包括的知识点有:

  • 小程序文件类型与目录结构
  • 注册小程序页面,View、Image、Text 等组件的基本用法
  • Flex 弹性盒子模型
  • 移动端分辨率及小程序自适应单位 RPX

先把多余的东西删掉
在这里插入图片描述
再重新新建 app.js 、app.json、app.wxss 文件
在这里插入图片描述
再在 pages 文件里新建一个 welcome 目录,把文件建全
在这里插入图片描述
打开 微信开放文档 ,点击框架,查看小程序的配置
在这里插入图片描述
将红框的代码复制到 app.json 中,再针对自己创建的目录进行修改:

{
	"pages": ["pages/welcome/welcome"]
}

打开 welcome.json,因为 json 文件不能为空,所以加上一个花括号,或者可以删除 json 文件:

{

}

再打开 welcome.js 文件,加入以下代码:

Page({

})

最后在 welcome.wxml 文件中加入以下代码:

<view>
	<text>hello</text>
</view>

就会出现这个界面啦:
在这里插入图片描述
在根目录下新建一个 images 文件夹,存放图片,然后调用图片;
再在 welcome.wxml 上加入以下代码:

<!-- wxml 是用来编写页面骨架的文件 -->
<!-- 在小程序中 view 的功能基本上是等同于 div 的,主要功能有容器、分隔文档 -->
<view>
  <image style="width:200rpx; height:200rpx;" src="/images/image.png"></image>
  <text>Hello, Jessie</text>
  <!-- <button></button> -->
  <view>
    <text>开启小程序之旅</text>
  </view>
</view>

下面我们尝试将样式的代码都转移到 welcome.wxss 文件中:

.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #b3d4db;
}

page{
  background-color: #b3d4db;
  height: 100%;
}

.user-image{
  width: 200rpx;
  height: 200rpx;
  margin-top: 160rpx;
  border-radius: 50%;
}

.user-name{
  margin-top: 60rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.moto{
  font-size: 22rpx;
  font-weight: bold;
  line-height: 80rpx;
  color: #405f80;
}

.moto-container{
  border: 1px solid #405f80;
  height: 80rpx;
  width: 200rpx;
  border-radius: 5px;
  text-align: center;
  margin-top: 200rpx;
}

/* flex 布局 弹性盒子模型 */

再补充一下 app.wxss 文件内的代码:

text{
  font-family: MicroSoft Yahei;
}

再打开 app.json 更改一下顶部状态栏的颜色:

{
  "pages": ["pages/welcome/welcome"],
  "window": {
    "navigationBarBackgroundColor": "#b3d4db"
  }
}

下面是 welcome.wxml 的代码:

<!-- wxml 是用来编写页面骨架的文件 -->
<!-- 在小程序中 view 的功能基本上是等同于 div 的,主要功能有容器、分隔文档 -->
<view class="container">
  <image class="user-image" src="/images/mayor.jpg"></image>
  <text class="user-name">Hello, Jessie</text>
  <!-- <button></button> -->
  <view class="moto-container">
    <text class="moto">开启小程序之旅</text>
  </view>
</view>

我们的第一个小程序页面就做好啦:
在这里插入图片描述

版权声明:本文为Jessieeeeeee原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Jessieeeeeee/article/details/106439284

智能推荐

ActiveMQ学习4-ActiveMQ的安全机制和集群模式

ActiveMQ的安全机制和集群模式 20 ActiveMQ安全机制 20.1 Web 控制台安全 20.2 消息服务器Broker安全 21 ActiveMQ主从集群 21.1 使用集群的重要性 20.2 主从集群的方式 20.2.1 shared filesystem Master-Slave方式主从集群 20.2.2 shared database Master-Slave方式主从集群 20...

说说 Python Django 应用的基础目录结构

通过以下 django-admin 指令创建应用之后,就会生成应用的基础目录结构。 比如,我们建立了一个叫 ‘first’ 的应用,它的目录结构是这样的: 目录或文件 说明 最外层的 first/ 这是新应用的根目录,所有与该应用相关的内容都放在这里。 manage.py 用于管理 Django 项目的命令行工具。 里面一层的 first/ 目录 是一个...

Springboot整合rabbitMQ

依赖: 配置文件application.yml RabbitConfig 消息生产者RabbitProducer 消息消费者RabbitCustomer 通过Controller进行调用 启动项目后调用接口: 结果:...

Thread.join()方法的使用

如果一个线程A执行了thread.join()语句,代表当前线程A等待thread线程终止后才从thread.join()方法返回 并且这个方法具有超时特性,可以添加参数设置 输出结果: jdk中Thread.join()方法的源码(进行了部门调整)   每个线程终止的条件是前驱线程的终止,每个线程等待前驱线程终止后,才从join()方法返回,  当线程终止时,会调用自身的no...

linux服务器部署jenkins笔记

安装jenkins参考文档:https://blog.csdn.net/tomatocc/article/details/83930714 1. 打开jenkins官网:https://jenkins.io/download/ 将war包下载到本地 **ps:**这里要注意的是要下载左边下方的war包,不要下载右边下面的war包。左边是稳定版本,右边是最新版本,建议大家使用稳定版本(我刚开始下载的...

猜你喜欢

k8s部署elasticsearch集群

百度营销大学     环境准备 我们使用的k8s和ceph环境见: https://blog.51cto.com/leejia/2495558 https://blog.51cto.com/leejia/2499684 ECK简介 Elastic Cloud on Kubernetes,这是一款基于 Kubernetes Operator 模式的新型编排产品,用户可使用该产品在...

saas-export项目-AdminLTE介绍与入门

AdminLTE介绍 (1)AdminLTE是什么? AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具 (2)AdminLTE有什么特点? 提供一系列响应的、可重复使用的组件, 并内置了多个模板页面 自适应多种屏幕分辨率,兼容PC和移动端 快速的创建一个响应式的Html5网站 AdminLTE 不但美观, 而且可以免去写很大CSS与JS的工作量 AdminLTE...

MyBatis中ResultMap结果集映射

用于解决属性名和字段名不一致的情况: resultMap 元素是 MyBatis 中最重要最强大的元素。...

编写一个shell

编写shell的过程: 1.从标准输入中读入一个字符串。 2.解析字符串 3.创建一个子进程的执行程序。 4.子进程程序替换。 5.父进程等待子进程退出。...

WEB自动化测试中Xpath定位方法

前言: Xpath是在XML文档中查找信息的一种语言,使用路径表达式来选取XML文档中的节点或节点集,由于XML与HTML结构类似(前者用于传输数据,后者用于显示数据),所以Xpath也常用于查找HTML文档中的节点或节点集。 一  路径表达式: 路径以“/”开始     表示找到满足该绝对路径的元素; 路径以//”开始  ...