【微信小程序——开发DAY1（黑马程序员课程）】

最新推荐文章于 2024-07-05 15:43:42 发布

喜欢下雨t

最新推荐文章于 2024-07-05 15:43:42 发布

阅读量1.1k

点赞数 37

文章标签：微信小程序 notepad++ 小程序

本文链接：https://blog.csdn.net/weixin_45753504/article/details/137467911

版权

微信小程序项目结构（标红为重点）

一. 小程序总体结构
微信小程序项目结构
二**. json配置文件的作用**

JSON文件种类	功能
app.json
project.config.json
sitemap.json
每个页面文件夹中的.json

（1）.app.json文件的四个主要配置项

pages：用来记录当前小程序的所有页面
window：全局定义小程序的背景颜色，文字颜色等
style：全局定义小程序组件所使用的的样式版本
sitemapLocation：指明 sitemap.json的位置

（2）.project.config.json需要了解的主要的配置项

setting：中保存了编译相关的配置——勾选的就会变Ture
projectname：保存的是项目的名称
appid：保存的是小程序的账号ID

（3）.sitem.json文件
解释：当开发者允许微信被索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的的索引匹配成功时，小程序的页面可能展示在搜索结果中
不想被索引时：将action属性改为disallow
调试面板中索引提示消息不想展示时：将project.config.json的checkSiteMap改为false

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "allow",//是否允许
  "page": "*"  //能被索引的页面范围
  }]
}

（4）页面中的.json配置文件

	注意：页面配置优先级高于全局.json的配置
	
	作用：对本页窗口外观进行配置

三.小程序页面的操作

（1）.创建新的小程序页面
在app.json->pages中新增页面的存放路径，保存后，小程序开发者工具自动帮我们创建一个文件夹
在这里插入图片描述
（2）修改项目首页

只需要将在app.json->pages中的你想设置为首页面的路径排放在第一位即可。

（3）WXML模板——类似于HTML——区别

标签名称不同
WXML	view，text，image，navigator
HTML	div，span,，img，a
属性节点不同
WXML	`<navigator url="pages/home/home><navigator>`
HTML	`<a href="#">超链接</a>`
类似于Vue中的模板语法
WXML	有（数据绑定，列表渲染，条件渲染）
HTML	无

（4）WXSS——类似于css——不同点

新增了rpx尺寸单位
css：需要手动进行像素单位换算
wxss：支持rpx单位，在不同大小屏幕会自动换算
提供了全局样式和局部样式
项目根目录app.WXSS会作用于所有的小程序页面
局部页面.WXSS样式仅对当前的页面生效
wxss仅支持部分css选择器
.class，#id，element，并集选择器，后代选择器，::after 和::before等伪类选择器

四.JS逻辑交互和JS分类

注：.js文件用来处理用户的操作，响应用户的点击，获取用户的位置等等

其中三大类分别是：

app.js
是整个小程序文件的入口，通过调用App( )函数来启动整个小程序
页面中的.js
是页面的入口文件，通过调用Page( )函数来创建并运行页面
普通的.js
是普通的功能模块文件，用来封装公共函数或者属性供页面使用

五.小程序的宿主环境：

基于微信

注：与一般的app不同，微信小程序不需要开发两个版本，它们是基于微信，在微信基础之上存在的，小程序借助宿主环境的能力，可以完成许多普通网页无法完成的功能，例如：微信扫码，微信支付，微信登录，地理定位，etc…
请添加图片描述

2.小程序宿主环境包含的内容

——通信模型

小程序中通信主体是渲染层和逻辑层，其中
渲染层：wxml，wxss样式
逻辑层：JS脚本工作在逻辑层（数据等）
两种方式的通信模型：两种方式由微信客户端进行转发（微信客户端为中间人）

（1）逻辑层和第三方服务之间的通行

js脚本发起数据请求——客户端传递给第三方服务器请求——服务器数据响应

（2）渲染层和逻辑层之间的通信

js脚本拿到的数据——微信客户端中转——渲染到wxml和wxss

-—— 运行机制

（1）小程序启动的过程：

小程序代码包下载到本地——解析app.json全局配置文件——执行app.js小程序入口文件，调用App( )创建小程序实例——渲染小程序首页——小程序启动完成

（2）页面渲染的过程

加载解析页面的.json配置文件文件——加载页面的.wxml模板和wxss样式——执行页面的.js文件，调用Page(
)创建页面实例——页面渲染完成

——组件
view组件的基本使用

wxml编写

<!--pages/list/list.wxml-->
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>

wxss编写

/* pages/list/list.wxss */
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}

.container1 view:nth-child(1){

background-color: lightgreen;
}
.container1 view:nth-child(2){
background-color: lightskyblue;
  
}
.container1 view:nth-child(3){
  background-color:lightcoral;
  
}
.container1{
  display: flex;
  justify-content: space-around;
}

scroll-view的使用——纵向滚动

wxml编写

<!--pages/list/list.wxml-->
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>

wxss编写——再view的基础上修改.container1类选择器即可

.container1{
 border: 1px solid red;
 /* 给scroll-view固定高度 */
 height: 220px;
 width: 100px;
}

swiper和swiper-item组件的基本使用

WXML编写

<!--pages/list/list.wxml-->
<!-- 轮播图的实现 -->
<swiper class="swiper-container" indicator-dots>
  <!-- 第一个轮播图 -->
<swiper-item>
  <view  class="item1">A</view>
</swiper-item>
<!-- 第二个轮播图 -->
<swiper-item>
  <view  class="item2">B</view>
</swiper-item>
<!-- 第三个轮播图 -->
<swiper-item>
  <view  class="item3">C</view>
</swiper-item>
</swiper>

WXSS编写
我使用黑马老师的代码颜色显示不出开
代码还是放在下面——后面的才是我自己的才可以显示背景颜色

/* pages/list/list.wxss */
.swiper-container{
  height: 150px;
}

.item1{
  height: 100%;
  line-height: 150px;
  text-align: center;

}
swiper-item:nth-child(1).item1{
background-color: lightblue;
}
swiper-item:nth-child(2).item1{
  background-color: lightpink;
}
swiper-item:nth-child(3).item1{
  background-color: lightgreen;
}

这是我的改过的代码——就编写的不简洁，现在赶时间，之后再去查文档，看看是不是语法使用改变了

/* pages/list/list.wxss */
.swiper-container{
  height: 150px;
}

.item1{
  height: 100%;
  line-height: 150px;
  text-align: center;
  background-color: lightseagreen;
}
.item2{
  height: 100%;
  line-height: 150px;
  text-align: center;
  background-color: lightpink;
}
.item3{
  height: 100%;
  line-height: 150px;
  text-align: center;
  background-color: lightblue;
}

轮播图常用属性查官方文档就行

属性	说明
indicator-dots	是否显示面板指示点
indicator-color	指示点颜色
indicator-active-color	当前选中的指示点·颜色
autoplay	是否自动
interval	自动切换时间间隔
circular	是否采用衔接滑动

text组件的基本使用

WXML编写

<view>
  手机号支持长按选中效果
<text selectable>123456789</text>
</view>

rich-text 这个的作用我很迷惑，不过还是写在这里
<rich-text nodes="<h1 style='color: red;'></h1>">标题</rich-text>
其他常用组件
（1）button
按钮组件
功能比html中的button按钮丰富
通过open-type属性可以调用微信提供的各种功能（客服，转发，获取用户授权，获取用户信息等）

WXML编写

<!--pages/list/list.wxml-->
<!-- 通过type指定按钮类型 -->
<view>--------------通过type指定按钮类型--------------</view>
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<!-- size=‘mini’ 小尺寸按钮-->
<view>---------------size=‘mini’ 小尺寸按钮-----------</view>
<button size='mini'>默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<!-- plain镂空按钮 -->
<view>--------------plain镂空按钮---------------</view>
<button size='mini' plain>默认按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

（2）image
图片组件
image组件默认宽度约300px，高度240px
请添加图片描述
WXML编写

<!--pages/list/list.wxml-->
<image></image>
<!-- 使用src指向图片路径 -->
<image src="/images/cat.jpg"></image>

WXSS编写

/* pages/list/list.wxss */
image{
  /* image有默认的宽和高 */
  border: 1px solid red;
}

image组件的mode属性

mode	说明
scaleToFill	(默认值，不保持纵横比缩放图片。宽高拉伸填满image元素)
aspectFit	保持纵横比，使图片的长边能完全显示出来，也就是可以完整的显示图片
aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来，也就是说，图片通常只在水平或垂直方向是完整的，另一个方向会发生截取
widthFix	宽度不变，高度自动变化——高度不受image默认高度限制
heightFix	高度不变，宽度自动变化——宽度不受image默认宽度限制

（3）navigator
页面导航组件
类似于HTML中的a链接

——API（Application Programming Interface应用编程接口）三大类
事件监听API
特点：以on开头，用来监听事件的触发
列如：wx.onWindowResize(function callback)监听窗口尺寸变化的事件
同步API
特点：以Sync结尾的API都是同步API，可以通过函数返回值直接获取，如果执行出错会抛出异常
列如：wx.setStorageSync(‘key’,‘value’)向本地存储中写内容
异步API
特点：需要通过success，fail，complete接收调用的结果
列如：wx.request（）发起网络请求，通过success回调函数接收数据
协同工作

项目成员的组织结构：产品组，设计组，开发组，测试组

小程序开发流程：提出需求——设计——开发——体验——测试——发布

不同项目成员对应的权限
请添加图片描述
添加项目成员和体验成员

小程序软件版本

版本阶段	说明
开发版本	使用开发者工具，可将代码上传到开发版本中。开发版本只保留每人最新的一份上传的代码。点击提交审核，可将代码提交审核。开发版本可删除，不影响线上版本和审核中的版本的代码
体验版本	可以选择某个开发版本作为体验版，并且选取一份体验版
审核中的版本	只有一份代码处于审核中。有审核结果后可以发布到线上，也可以直接重新提交审核，覆盖原审核版本
线上版本	线上用户使用的代码版本，该版本代码在新版代码发布后被覆盖更新

小程序发布

小程序推广与运行数据