微信开发简介
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.基础组件
组件是视图层的基本组成单元。
组件自带一些功能与微信风格一致的样式。
一个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内。
所有组件都有以下属性：
| 属性名 | 类型 | 描述 | 注解 |
|---|---|---|---|
| id | String | 组件的唯一标示 | 保持整个页面唯一 |
| class | String | 组件的样式类 | 在对应的 WXSS 中定义的样式类 |
| style | String | 组件的内联样式 | 可以动态设置的内联样式 |
| hidden | Boolean | 组件是否显示 | 所有组件默认显示 |
| 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
<
</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>
