微信小程序开发(详解)-保证学的明明白白的

微信开发简介

1.微信开发概述

概述

(1)微信开发即微信公众平台开发,将企业信息、服务、活动等内容通过微信网页的方式进行表现,用户通过简单的设置,就能生成微信网站。
(2)通俗的说,就是微信对外提供了例如聊天、支付、分享、收藏等功能,同时还提供了丰富的封装好的接口,开发者利用这些接口和功能,写入程序中,进行的开发。

目的

(1)企业开发的需要,使自己更加符合企业发展的需求
(2)个人的发展以及技能的提升
(3)发展前景大、生态系统丰富

平台

(1)微信开放平台
(2)微信公众平台

2.微信开放平台

概述

微信开放平台是微信对外提供微信开发接口的一个平台,这些开发出来的微信接口,供第三方的网站或App使用,使用户可将第三方程序的内容发布给好友或分享至朋友圈,第三方内容借助微信平台获得更广泛的传播。

平台地址:https://open.weixin.qq.com/

微信开放平台提供的能力

微信分享、 微信支付、 微信登录、微信收藏、微信分享等等

产品应用

(1)网站应用开发
(2)移动应用开发
(3)第三方平台开发
(4)公众帐号开发

只有通过 开发者资质认证后,才能使用开发平台提供的能力

3.微信公众平台 ***

mp.wqeixin.qq.com

3.1微信公众平台概述

为开发者提供资讯和服务的平台

3.2账号分类

1、服务号
2、订阅号
3、小程序
4、企业微信

4.开放平台和公众平台的区别

1.开放平台
	(1)微信对外开放接口的平台
	(2) 开放的接口,供其他网站及App使用
	(3)后端程序员是开放平台开发的主力军
2.公众平台
	(1) 基于微信公众号,为微信用户提供服务的平台
	(2) 所用公众号,都属于微信内开发
	(3)前端程序员是公众平台开发的主力军

三、认识小程序

1.小程序概述

小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。

2.应用场景

适合轻量简单的开发
	快递类,商城类,餐饮类,教育。。。

3.亮点与不足

优点:
	1、不需要下载安装即可使用的应用
	2、自带流量(12亿微信用户都可以使用)
	3、开发难度低(html+css+js)
	4、开发成本低
缺点:
	1、代码大小默认只有2M
	2、不能直接分享到朋友圈

四、注册小程序账号

1.小程序账号注册流程

信息登记

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mldbeduT-1620906177905)(img/day01-1.png)]

填写管理员信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XzLlaZKN-1620906177909)(img/day01-2.png)]

2.小程序信息完善

登陆之后,找到左侧设置,如下图:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iZBRUcwh-1620906177910)(img/day01-3.png)]

3、管理

版本管理:

​ 开发版

​ 体验版

​ 审核版

​ 线上版

成员管理

​ 管理员

​ 项目成员

​ 体验成员

4、开发设置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h0q3f9HV-1620906177912)(img/day01-4.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ceaxaC8-1620906177913)(img/day01-5.png)]

注意:域名必须是https协议,,域名必须被解析

五、微信开发者工具及工程创建

首先小程序开发不同于普通的网页开发,项目不能运行在浏览器中,所以无法查看编程效果以及调试,微信开发者工具提供了代码的编程能力,调试能力以及展示运行效果能力等强大的功能

1.工具下载安装

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

2.工程创建

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q5ay0ywu-1620906177914)(img/day01-6.png)]

3.工具常用功能使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uTGzf1fM-1620906177916)(img/day01-7.png)]


六、工程目录(重点)

1.初始化工程目录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B0AVvEav-1620906177917)(img/day01-8.png)]

app.js    小程序的入口文件   类似于 vue里的main.js
app.json  全局配置文件
app.wxss  全局样式文件
project.config.json  项目关于编辑器的配置文件  
sitemap.json   站点地图(哪些页面能够被搜索到)
utils:     工具目录
pages:页面目录
	index目录
		index.wxml  页面结构 相当于html
		index.wxss  页面样式 相当于css
		index.js    页面逻辑
		index.json  页面的配置
	

  

2.小程序目录结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ll4QDdZ2-1620906177918)(img/day01-9.png)]

七、小程序配置

1.配置概述

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象,有以下属性:

2.全局配置app.json

 "entryPagePath": "pages/cart/cart",     设置默认启动页
  "pages": [                             创建页面(在pages里的页面,必须在注册注册)
    "pages/index/index",
    "pages/list/list",
    "pages/logs/logs",
    "pages/cart/cart"
  ],
    "window": {
    "navigationBarBackgroundColor": "#f00",   窗口背景颜色
    "navigationBarTitleText": "微信小程序",     标题内容
    "navigationBarTextStyle": "black",         标题的文字颜色
    "navigationStyle":"default",               是否自定义顶部window  dustum  自定义

    "backgroundColor":"#6699cc",               下拉时的背景颜色
    "enablePullDownRefresh":true,              开启下拉刷新
    "backgroundTextStyle":"light"              load的加载样式  dark  闪烁  light 不闪烁
  },
  
  tabber项至少两个,最多五个
    "tabBar": {
    "color": "#666",
    "selectedColor": "#f00",
    "backgroundColor":"#ff0",
    "borderStyle":"white",
    "custom":false,
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/img/index.png",
        "selectedIconPath": "/img/index_sel.png"
      },{
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "/img/cart.png",
        "selectedIconPath": "/img/cart_sel.png"
      },{
        "pagePath": "pages/list/list",
        "text": "列表", 
        "iconPath": "/img/my.png",
        "selectedIconPath": "/img/my_sel.png"
      }
    ]
  }

注意事项:

1、json文件里不允许注释

2、字符串使用的是双引号

3、 “pages/index/index” 在pages前不要添加任何字符 . ./ …/

4、在最后一项后边不要添加逗号

3.页面配置page.json

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象,有以下属性

注意:不需要指定window
{
   "navigationBarBackgroundColor":"#ff0",
   "navigationBarTitleText":"首页"
}

八、场景值

1.场景值概述

获取到进入小程序的途径/场景

2.使用场景

KFC
搜索小程序:进入到首页
到店,扫描桌子二维码,进入到点餐

3.获取场景值

App({
  // 监听小程序的初始化
  方式一、
  onLaunch(options){
    console.log(options)
    if(options.scene==1001){
      // 进入到首页
    }else{
      // 进入到点餐页面
    }
  },

	方式二、
  // 监听小程序显示或切前台
  onShow(options){
    console.log(options)
  },
  方式三、 api获取   也可以放到onLaunch
  onShow(){
   let scene = wx.getLaunchOptionsSync()
   console.log(scene)
  },
})

十、小程序逻辑层

1.逻辑层概述

小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。

在 JavaScript 的基础上,我们增加了一些功能,以方便小程序的开发:

增加 App 和 Page 方法,进行程序注册和页面注册。
增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。
提供模块化能力,每个页面有独立的作用域。

注意:小程序框架的逻辑层并非运行在浏览器中,因此 JavaScript 在 web 中一些能力都无法使用,如 window,document 等。

2.小程序注册App()

App({

	onLaunch,onShow,onHide生命周期函数
  // 只执行一次
  onLaunch(){
    console.log("onLaunch-监听小程序初始化")
  },
  // 每次进入到这个小程序时都执行
  onShow(){
    console.log("onShow-监听小程序启动或切前台")
  },
  onHide(){
    console.log("onHide-监听小程序切后台")
  },
  onError(err){
    console.log("onError-错误监听函数。",err)
  },
  onPageNotFound(){
    console.log("页面不存在")
    wx.switchTab({
      url: './pages/index/index',
    })
  }

 
})

2.1获取全局唯一应用实例

写在页面的js文件里即可
let app = getApp()
let {name,age} = app.userinfo
console.log(name,age)

3.页面注册Page()

Page({
	

  // 生命周期
  // 只加载一次,在onLoad里options 可以接收参数,注意:在tabber页面无法接参
  onLoad(options){
    console.log("onLoad-生命周期回调—监听页面加载")
  },
  // 每次进到当前页面都会加载
  onShow(){
    console.log("onShow-生命周期回调—监听页面显示")
  },
  onReady(){
    console.log("onReady-监听页面初次渲染完成")
  },
  onHide(){
    console.log("onHide-监听页面隐藏")
  },
  onUnload(){
    console.log("onUnload-监听页面卸载")
  },
  事件函数
    onPullDownRefresh(){
    // 监听用户下拉
    // 1、获取data里的变量
    console.log(this.data.msg)
    // 2、修改值
    // this.setData 可以更新页面
    this.setData({
      msg:"web1207"
    })

    // 也能修改成功,但是不能更新页面
    // this.data.msg = "web1207"
    // console.log(this.data.msg)

  },
    onReachBottom(){
    console.log("上拉触底")
    this.data.page++
    console.log(this.data.page)
    // 调用接口 页码传过去
        

  },
      
      
  // 转发给朋友
  onShareAppMessage(){

  },
  // 转发到朋友圈
  onShareTimeline(){

  },
  // any
  info:{
    name:"root",
    age:"18"
  },
  fn(){
    return "我是自定义函数111"
  }
  })
  
  A页面-B页面  经过了几个生命周期
  A onHide - B onLoad - B onShow - B onReady
  
  进入到一个小程序:
  		小程序onLaunch-小程序的onShow-页面的onLoad - 页面的onshow - 页面的onready
  离开一个小程序:
  		页面的onHide - 小程序的onHide

4.模块化

可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。es6也完全支持
// commonjs 暴露
module.exports = baseurl

module.exports = {
  baseurl,userinfo
}
//引入
// let baseurl = require("../../utils/config") 
let {baseurl,userinfo} = require("../../utils/config")
console.log(baseurl,userinfo)

// es6
export default baseurl
export default {baseurl,userinfo}

import aa from "../../utils/config"
console.log(aa.baseurl,aa.userinfo)


十一、基础语法

1.基础组件

组件是视图层的基本组成单元。
组件自带一些功能与微信风格一致的样式。
一个组件通常包括 开始标签 和 结束标签,属性 用来修饰这个组件,内容 在两个标签之内。

所有组件都有以下属性:

属性名类型描述注解
idString组件的唯一标示保持整个页面唯一
classString组件的样式类在对应的 WXSS 中定义的样式类
styleString组件的内联样式可以动态设置的内联样式
hiddenBoolean组件是否显示所有组件默认显示
data-*Any自定义属性组件上触发的事件时,会发送给事件处理函数
bind* / catch*EventHandler组件的事件详见事件

特殊属性

<view >
  <view class="box"  
hover-class="active"
hover-start-time="0"
hover-stay-time="500"
>
  
</view>
</view>

<!-- 相当于span -->
<text user-select space="emsp" decode>
  相当于       span相当于span相当于span相当于span相当于span相当于span

  &lt;
</text>


<image src="/img/cart1.png" binderror="_binderror" lazy-load show-menu-by-longpress bindload="_bindload"></image>

2.数据渲染

基本数据绑定
	{{}} 语法
属性绑定
<!-- 
  属性绑定:
      vue   v-bind   :class=“box”
      小程序           class = "{{box}}"
 -->
<view class="{{box}}">
  首页
</view>
	
遍历

<view wx:for="{{arr}}">
  {{index}} ----  {{item}}
</view>

<view wx:for="{{userinfo}}">
  {{index}} -- {{item}}
</view>


<view wx:for="{{goodsinfo}}"> 
  {{item.price}} --- {{item.goodsname}}
</view>

热门文章

暂无图片
编程学习 ·

exe4j详细使用教程(附下载安装链接)

一、exe4j介绍 ​ exe4j是一个帮助你集成Java应用程序到Windows操作环境的java可执行文件生成工具&#xff0c;无论这些应用是用于服务器&#xff0c;还是图形用户界面&#xff08;GUI&#xff09;或命令行的应用程序。如果你想在任务管理器中及Windows XP分组的用户友好任务栏…
暂无图片
编程学习 ·

AUTOSAR从入门到精通100讲(126)-浅谈车载充电系统通信方案

01 引言 本文深入研究车载充电系统策略,设计出一套基于电动汽车电池管理系统与车载充电机的CAN通信协议,可供电动汽车设计人员参考借鉴。 02 电动汽车充电系统通讯网络 电动汽车整车控制系统中采用的是CAN总线通信方式,由一个整车内部高速CAN网络、内部低速CAN网络和一个充电…
暂无图片
编程学习 ·

CMake(九):生成器表达式

当运行CMake时&#xff0c;开发人员倾向于认为它是一个简单的步骤&#xff0c;需要读取项目的CMakeLists.txt文件&#xff0c;并生成相关的特定于生成器的项目文件集(例如Visual Studio解决方案和项目文件&#xff0c;Xcode项目&#xff0c;Unix Makefiles或Ninja输入文件)。然…
暂无图片
编程学习 ·

47.第十章 网络协议和管理配置 -- 网络配置(八)

4.3.3 route 命令 路由表管理命令 路由表主要构成: Destination: 目标网络ID,表示可以到达的目标网络ID,0.0.0.0/0 表示所有未知网络,又称为默认路由,优先级最低Genmask:目标网络对应的netmaskIface: 到达对应网络,应该从当前主机哪个网卡发送出来Gateway: 到达非直连的网络,…
暂无图片
编程学习 ·

元宇宙技术基础

请看图&#xff1a; 1、通过AR、VR等交互技术提升游戏的沉浸感 回顾游戏的发展历程&#xff0c;沉浸感的提升一直是技术突破的主要方向。从《愤怒的小鸟》到CSGO,游戏建模方式从2D到3D的提升使游戏中的物体呈现立体感。玩家在游戏中可以只有切换视角&#xff0c;进而提升沉浸…
暂无图片
编程学习 ·

flink的伪分布式搭建

一 flink的伪分布式搭建 1.1 执行架构图 1.Flink程序需要提交给 Job Client2.Job Client将作业提交给 Job Manager3.Job Manager负责协调资源分配和作业执行。 资源分配完成后&#xff0c;任务将提交给相应的 Task Manage。4.Task Manager启动一个线程以开始执行。Task Manage…
暂无图片
编程学习 ·

十进制正整数与二进制字符串的转换(C++)

Function one&#xff1a; //十进制数字转成二进制字符串 string Binary(int x) {string s "";while(x){if(x % 2 0) s 0 s;else s 1 s;x / 2;}return s; } Function two&#xff1a; //二进制字符串变为十进制数字 int Decimal(string s) {int num 0, …
暂无图片
编程学习 ·

[含lw+源码等]微信小程序校园辩论管理平台+后台管理系统[包运行成功]Java毕业设计计算机毕设

项目功能简介: 《微信小程序校园辩论管理平台后台管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序做的辩论管理前台和Java做的后台管理系统&#xff1a; 微信小程序——辩论管理前台涉及技术&#xff1a;WXML 和 WXS…
暂无图片
编程学习 ·

树莓派驱动DHT11温湿度传感器

1&#xff0c;直接使用python库 代码如下 import RPi.GPIO as GPIO import dht11 import time import datetimeGPIO.setwarnings(True) GPIO.setmode(GPIO.BCM)instance dht11.DHT11(pin14)try:while True:result instance.read()if result.is_valid():print(ok)print(&quo…
暂无图片
编程学习 ·

ELK简介

ELK简介 ELK是三个开源软件的缩写&#xff0c;Elasticsearch、Logstash、Kibana。它们都是开源软件。不过现在还新增了一个 Beats&#xff0c;它是一个轻量级的日志收集处理工具(Agent)&#xff0c;Beats 占用资源少&#xff0c;适合于在各个服务器上搜集日志后传输给 Logstas…
暂无图片
编程学习 ·

Linux 基础

通常大数据框架都部署在 Linux 服务器上&#xff0c;所以需要具备一定的 Linux 知识。Linux 书籍当中比较著名的是 《鸟哥私房菜》系列&#xff0c;这个系列很全面也很经典。但如果你希望能够快速地入门&#xff0c;这里推荐《Linux 就该这么学》&#xff0c;其网站上有免费的电…
暂无图片
编程学习 ·

Windows2022 无线网卡装不上驱动

想来 Windows2022 和 windows10/11 的驱动应该差不多通用的&#xff0c;但是死活装不上呢&#xff1f; 搜一下&#xff0c;有人提到 “默认安装时‘无线LAN服务’是关闭的&#xff0c;如果需要开启&#xff0c;只需要在“添加角色和功能”中&#xff0c;选择开启“无线LAN服务…
暂无图片
编程学习 ·

【嵌入式面试宝典】版本控制工具Git常用命令总结

目录 创建仓库 查看信息 版本回退 版本检出 远程库 Git 创建仓库 git initgit add <file> 可反复多次使用&#xff0c;添加多个文件git commit -m <message> 查看信息 git status 仓库当前的状态git diff 差异对比git log 历史记录&#xff0c;提交日志--pret…
暂无图片
编程学习 ·

用Postman生成测试报告

newman newman是一款基于nodejs开发的可以运行postman脚本的工具&#xff0c;使用Newman&#xff0c;可以直接从命令运行和测试postman集合。 安装nodejs 下载地址&#xff1a;https://nodejs.org/en/download/ 选择自己系统相对应的版本内容进行下载&#xff0c;然后傻瓜式安…
暂无图片
编程学习 ·

Java面向对象之多态、向上转型和向下转型

文章目录前言一、多态二、引用类型之间的转换Ⅰ.向上转型Ⅱ.向下转型总结前言 今天继续Java面向对象的学习&#xff0c;学习面向对象的第三大特征&#xff1a;多态&#xff0c;了解多态的意义&#xff0c;以及两种引用类型之间的转换&#xff1a;向上转型、向下转型。  希望能…