【微信小程序开发零基础入门】——微信小程序入门

微信小程序学习

前言

学习小程序跟学习网页开发有什么不同

1.运行环境不同
网页运行在浏览器中，而微信小程序运行在微信中
2.开发模式不同
网页开发一般用浏览器+编译器
而微信小程序也有自己的一套标准开发模式：
  申请小程序开发账号
  安装微信开发者工具软件
  创建和配置小程序项目
3.api不同
因为运行的环境不同，小程序无法调用浏览器环境的dom和bom，但是小程序可以调用微信环境的各种api，如：地理定位，扫码，支付

---

正文

了解小程序构成

1.如何创建微信小程序项目

1.1 注册、登录、复制appId

注册：在 https://mp.weixin.qq.com/cgi-bin/wx 进行注册微信小程序开发账号

登录：在 https://mp.weixin.qq.com 登录小程序账号

复制appId: 在 "开发" 的 "开发管理" 的 "开发设置" 的 "开发者ID"中

1.2 下载微信开发者工具

在 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 下载软件

1.3 进入微信开发者工具扫码登录，使用到上面的APPId。选好存放文件的位置，选择小程序开发模式，选择不使用云服务，选择javascript语言，点击创建项目

1. 熟悉认识创建的项目文件的主要结构

2.1 pages文件夹

pages文件夹使用来存放所有小程序的页面的，一个页面也是是由四个文件组成的文件夹。比如说：pages文件夹中的index文件夹，包含了.js,.wxml,.wxss,.json文件

.js文件（页面的脚本文件，存放页面的数据，事件处理函数。如：data） 
.json文件（当前页面的配置文件，配置窗口的外观，表现）
.wxml文件（页面的模板结构文件，相当于html）
.wxss文件（当前页面的样式表文件,相当于css）

2.2 utils文件夹

utils文件夹是用来存放工具性质的模块（比如说：格式化事件的自定义模块，最后还要导出）

2.3 app.js文件

app.js文件是小程序的入口文件，整个小程序的执行首先由app.js入手

2.4 app.json文件

小程序项目的全局配置文件

2.5 app.wxss文件

app.wxss小程序项目的全局样式文件

2.6 project.config.json

project.config.json 项目的配置文件

2.7 sitemap.json

sitemap.json用来配置小程序及页面是否允许被微信索引（允许的话，当在微信搜索相关关键字时，会显示出来该小程序）

3.小程序的json配置文件

json是一种数据格式，在实际开发中，json总是以配置文件的形式出现。小程序的项目也是不例外的：通过不同的.json配置文件，可以对小程序项目进行不同级别的配置。

小程序项目包含4中json配置文件，分别有：

(1)项目根目录的app.json配置文件

(2)项目根目录的project.config.json配置文件

(3)项目根目录的sitemap.json配置文件

(4)在pages文件夹中每一个页面文件夹的.json配置文件

(1)项目根目录的app.json配置文件
app.json是小程序的全局配置，包括了小程序的: 
pages:所有页面的路径pages（可以在这里创建新的页面）
window:全局定义小程序的所有页面的背景色、文字颜色等
style:全局定义小程序组件所使用的样式版本
sitemapLocation:用来指明sttemap.json的位置
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/test/test"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

(2)项目根目录的project.config.json配置文件
用来记录我们对小程序开发工具所做的个性化配置：
appid中存储了小程序账号的id
setting中保存了编译相关的配置
projectname中保存了项目的名称

(3)项目根目录的sitemap.json配置文件
用来配置小程序页面是否允许被微信索引，如果允许，搜关键字如果匹配成功会出现该小程序。
注意：sitemap.json的索引默认是开启的，如果想要关闭，可以在setting中配置字段checkMap为false

(4)在pages文件夹中每一个页面文件夹的.json配置文件
用来配置当前页面，如果跟全局app.json重复冲突时，会就近原则，按照当前页面的.json来执行

4.小程序的wxml和网页html的区别

(1)标签名字不同
html(div,span,img,a)
wxml(view,text,image,navigator)
wxml的view标签相当于html的div标签，都是块级元素，能够设置宽高
text相当于span行内元素
注意wxml的图片标签是images，不是html的img
wxml的链接标签是navigator，不是html的a

(2)属性节点不同
<a href="#"></a>
<navigator url="/pages/index/index.js"></navigator>
html的链接属性是href，而wxml的链接属性是url

(3)提供了类似于vue中的模板语法
可以直接使用，不像html还得安装。但是跟vue的使用还是有点差别的，如数据绑定不需要v-bind,v-model;v-if，v-else,v-show在小程序是wx:if、wx:ifelse、wx:else等；v-for，:key在小程序是wx:for,wx:for-item,wx:key,拿v-for的东西不需要像vue一样（index,item）item打点拿到，直接item就是当前元素，直接index就是当前的索引了。
数据绑定
列表渲染
条件渲染

5.小程序的wxss和网页的css的区别

(1)新增了rpx尺寸单位(自动适配屏幕大小)
这个rpx单位能够自动适应不同尺寸的设备，一个屏幕分成750份rpx。我们不管设置了多少rpx,都会自动去进行换算匹配，很方便。
在ip6中，1rpx=0.5px,1px=2rpx,所以ip6分成750/2=375px.
 
而css中需要我们手动进行像素单位的换算，例如rem

(2)提供了全局的样式和局部的样式
项目根目录的app.wxss会作用于所有小程序页面。
局部页面的.wxss会作用于当前页面生效。
 
而css是需要我们去引入样式的<link rel="stylesheet" href="" />

(3)wxss仅支持部分css选择器
类选择器.class和id选择器#id
元素选择器element
并集选择器，后代选择器
::after和 ::before等伪类选择器

6.小程序的.js文件

小程序的.js文件分为三大类：

app.js文件（是整个项目的入口文件，通过App()函数启动整个小程序）

页面的.js文件（是页面的入口文件，通过Page()函数来创建并运行整个页面）

普通的.js文件（比如utils文件夹中的文件，是普通功能模块文件，用来封装公共的函数或者属性供页面使用，需要向外暴露）

7.创建小程序的页面及修改项目的首页

创建小程序页面
(1)右键新建文件夹，新建.js文件，会自动生成剩下的三个文件，如:.json,.js,.wxml
(2)在app.json全局配置文件中的pages属性中新增页面的存放路径，小程序会自动生成对应的页面文件，如：
"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/test/test"
  ]

修改项目的首页
只需要调整app.json中的pages页面路径的前后顺序。小程序会把排在第一位的页面，当作项目首页进行渲染
"pages":[
    "pages/test/test",
    "pages/index/index",
    "pages/logs/logs",
  ]

8.小程序的启动过程和页面渲染过程

8.1 小程序的启动过程

把小程序的代码包下载到本地

解析app.json全局配置文件

执行app.js小程序入口文件，调用App()函数创建小程序实例

渲染小程序的首页（没有app.wxml文件）

小程序启动完成

8.2 页面渲染的过程

加载解析页面的.json配置文件

加载页面的.wxml模板和.wxss样式

执行页面的.js文件，调用Page()函数创建页面的实例

页面渲染完成

小程序用法

1.小程序组件

1.1 组件是干嘛的，有什么作用

组件相当于标签名，可以基于组件快速搭建出漂亮的页面结构

1.2组件的分类

1.2.1 视图容器

（1）view

普通视图区域，类似于html的div，是一个块级元素，常用来作为页面的布局效果

<view class="bigbox1">
  <view class="box1"></view>
  <view class="box2"></view>
  <view class="box3"></view>
</view>

//纵向滑动：(要为scroll-view设定高度height，还有指定scroll-y属性)
<scroll-view style="height:300rpx" scroll-y >
 <view>
  <view class="box1"></view>
  <view class="box2"></view>
  <view class="box3"></view>
  </view>
</scroll-view>
 
横向滑动：(要为scroll-view设定宽度width，并且指定好scroll-x属性；)(为view设定flex和指定宽度)
<scroll-view style="width:300rpx" scroll-x >
 <view style="display:flex;width:800px">
  <view class="box1"></view>
  <view class="box2"></view>
  <view class="box3"></view>
  </view>
</scroll-view>

swiper和swiper-item
轮播图容器组件和轮播图item组件
<!--轮播图-->
<swiper autoplay indicator-dots="true" interval="2000" circular="true">
  <swiper-item>
    <image src="/images/1.webp"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/2.webp"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/6.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/7.webp"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/8.webp"></image>
  </swiper-item>
</swiper>
 
/*
wxss
1、设置swiper组件的宽高 。
2、设置swiper组件里面图片的宽高。
注意：这里必须两个同时设置才能达到图片占满的效果
*/
swiper {
  width:100%;
  height:200px;
}
swiper-item image {
  width:100%;
  height:200px;
}

1.2.2 基础内容

text
文本组件，类似于html的span标签，是一个行内元素
如果想让被用户长按选中的话，需要加上selectable属性
<view>
  你好
  <text>你好2</text>
</view>
<view>
  你好
  <text selectable="true">你好3</text>
</view>

rich-text
富文本文件，支持把html字符串渲染为wxml结构放在标签内
<view>
  <text><h1>一般text</h1></text>
  <!--不显示-->
</view>
<view>
  <rich-text nodes="<h1 style='color:pink;'>一般text</h1>"></rich-text>
</view>

1.2.3 其他常用组件

button
按钮组件，功能比html的button按钮丰富，通过open-type属性可以调用微信提供的各种功能（客服，转发，获取用户授权，获取用户信息等）
<!--button的使用-->
<button bindtap="handler">我是一个按钮</button>
<button type="primary">primary按钮</button>
<button type="warn">warn按钮</button>
<button type="default" >default按钮</button>
<button size="mini">按钮</button>
<button size="mini" plain>按钮</button>

image
图片组件，image组件默认宽度约是300px，高度为240px
<!--image的使用-->
<image src="/images/1.webp" ></image>
<image src="/images/1.webp" style="width:100%;height:200px"></image>
<image src="/images/1.webp" mode="heightFix"></image>

navigator
页面导航组件，类似于html中的a链接
<navigator url="/pages/container/contatiner">container</navigator>

表单组件

导航组件

媒体组件

map地图组件

canvas画布组件

开放能力

无障碍访问

2.小程序API

2.1小程序API概述

小程序中的api是由宿主环境（微信）提供的，通过这些丰富的小程序api，开发者可以方便的调用微信提供的api;例如：获取用户信息、本地存储、支付功能（wx打点调用）

2.2小程序api的3大分类

(1)事件监听api

特点：以on开头，用来监听某些事件的触发（wx.onWindowResize(function,callback)监听窗口尺寸变化的事件）

(2)同步api

特点：以Sync结尾的api都是同步api；同步api的执行结果，可以通过函数返回值直接获取，如果执行储出错会抛出异常（wx.setStorageSync('key','value')向本地存储写入内容

(3)异步api

特点：类似于jquery中的$.ajax(options)函数，需要通过success、fall、complete接收调用的结果（wx.request()发起网络数据请求，通过success回调函数接收数据）

3.协同工作和发布

3.1项目成员的组织结构

项目管理者（统筹整个项目的进展和风险）

产品组（提需求）

设计组（出设计方案）

开发组（代码开发）

测试组（项目测试）

3.2小程序的开发流程

提出需求（产品组）

设计（设计组）

开发（开发组）

体验（产品组、设计组）

测试（测试组）

发布（管理者）

3.3小程序的版本

开发版本

体验版本

审核中的版本

线上版本

3.4小程序发布的整体步骤

上传代码->提交审核->发布

3.5上传代码

(1)点击开发者工具顶部工具栏的“上传”按钮

(2)填写版本号和项目备注

3.6在后台查看上传后的版本

登录小程序管理后台->管理->版本管理->开发版本

https://mp.weixin.qq.com

3.7提交审核

小程序的发布需要经过腾讯官方审核的（在开发版本的列表中，点击提交审核按钮，按照页面提示填写相关的信息，就能把小程序提交到腾讯官方进行审核）

3.8发布

审核通过后，管理员的微信会收到小程序审核通过的通知，此时在审核版本的列表中，点击"发布"按钮之后，即可把小程序版本发布为线上版本，供小程序用户访问和使用

3.9基于小程序码进行推广

获取小程序码的5个步骤

登录小程序管理后台->设置->基本设置->小程序及线下物料下载

3.10查看小程序运营数据的两种方式

(1)在小程序后台查看

登录小程序管理后台->点击侧边栏的"统计"->点击相应的tab可以看到相关的数据

(2)使用"小程序数据助手"查看

打开微信->搜索小程序数据助手->查看已发布的小程序相关数据