微信小程序入门1(2022/7/19 完结)

---

前言

学习从0开始入门编写一个微信小程序
学习自黑马程序员

0 笔记链接

链接: 微信小程序入门篇2

一、小程序与网页程序的区别

二、注册小程序开发账号

打开这个网址
https://mp.weixin.qq.com/
立即注册后选择

先选择个人注册
注册后可以在开发管理中查看到你的AppID
后面开发小程序会用到

三 安装开发者工具

链接在这里
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

选择最新版本的稳定版进行安装(注意你的系统版本)
安装好后就可以扫码登陆了

四 创建第一个小程序项目

直接点击项目
新建项目即可
注意填入你自己的appid

五 了解小程序的组成结构

注意------------------------------
如果拿到一个别人给你的项目
先把appid改成自己的可以避免很多报错

六 认识小程序页面

6.0 新建小程序页面和修改首页

6.1 介绍WXML

6.2 介绍WXSS样式

6.3 介绍小程序的js文件

七 小程序的宿主环境

八 小程序组件

8.1 view组件实现基本效果

最终效果如图

1 wxml结构实现代码如下

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

2 Wxss样式代码如下

/* pages/list/list.wxss */
/* 对容器中的每个view进行基本配置 */
.container1 view{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
/* 对容器中三个view分别进行背景颜色设置 */
.container1 view:nth-child(1){
    background-color: lawngreen
}
.container1 view:nth-child(2){
    background-color: lightcoral;
}
.container1 view:nth-child(3){
    background-color: lightskyblue;
}
/* 对容器进行布局设置 */
.container1 {
    /* 陈列方式为伸展 */
    display: flex;
    /* 调整内容 空格围绕 */
    justify-content:space-around
}

8.2 scroll-view组件基本使用

最终效果如图

1 wxml代码如下

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

2 wxss代码如下

/* pages/list/list.wxss */
/* 对容器中的每个view进行基本配置 */
.container1 view{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
/* 对容器中三个view分别进行背景颜色设置 */
.container1 view:nth-child(1){
    background-color: lawngreen
}
.container1 view:nth-child(2){
    background-color: lightcoral;
}
.container1 view:nth-child(3){
    background-color: lightskyblue;
}
/* 对容器进行布局设置 */
.container1 {
border: 1px solid red;
width: 100px;
height: 120px;
}

编写好代码之后记得编译一下
滚动才会生效

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

9.1 基本使用实例

最终效果是如下

1 wxml 代码

<!--pages/list/list.wxml-->
<!-- <text>pages/list/list.wxml</text> -->
<swiper class="swiper-container">
<!-- 第一轮播图 -->
<swiper-item>
 <view class="item">A</view>
</swiper-item>
<!-- 第二轮播图 -->
<swiper-item>
 <view class="item">B</view>
</swiper-item>
<!-- 第三轮播图 -->
<swiper-item>
 <view class="item">C</view>
</swiper-item>
</swiper>

2 wxss代码

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

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

swiper-item:nth-child(1) .item {
   background-color: red;
}
swiper-item:nth-child(2) .item {
   background-color: gold;
}
swiper-item:nth-child(3) .item {
   background-color: aqua;
}

9.2 swiper的常用属性

十 text 和 rich-text组件的基本使用

10.1 演示案例

最终效果

wxml代码如下
注意 复制效果使用预览操作
用你的手机扫码进行测试

<view>
<text selectable>手机号123123123</text>
</view>

<rich-text nodes="<h1 style='color: red;'>标题</h1>"></rich-text>

十一 button 和 image组件的基本使用

11.1 button按钮使用

11.2 image按钮使用

基本使用

image的mode 属性

十二 小程序api的三大分类

十三 协同工作

十四 发布小程序

14.1 小程序的版本

14.2 小程序的推广和查看运营数据

总结

最基础的入门