概述
(1)微信开发即微信公众平台开发,将企业信息、服务、活动等内容通过微信网页的方式进行表现,用户通过简单的设置,就能生成微信网站。
(2)通俗的说,就是微信对外提供了例如聊天、支付、分享、收藏等功能,同时还提供了丰富的封装好的接口,开发者利用这些接口和功能,写入程序中,进行的开发。
目的
(1)企业开发的需要,使自己更加符合企业发展的需求
(2)个人的发展以及技能的提升
(3)发展前景大、生态系统丰富
平台
(1)微信开放平台
(2)微信公众平台
概述
微信开放平台是微信对外提供微信开发接口的一个平台,这些开发出来的微信接口,供第三方的网站或App使用,使用户可将第三方程序的内容发布给好友或分享至朋友圈,第三方内容借助微信平台获得更广泛的传播。
平台地址:https://open.weixin.qq.com/
微信开放平台提供的能力
微信分享、 微信支付、 微信登录、微信收藏、微信分享等等
产品应用
(1)网站应用开发
(2)移动应用开发
(3)第三方平台开发
(4)公众帐号开发
只有通过 开发者资质认证后,才能使用开发平台提供的能力
mp.wqeixin.qq.com
为开发者提供资讯和服务的平台
1、服务号 2、订阅号 3、小程序 4、企业微信
1.开放平台 (1)微信对外开放接口的平台 (2) 开放的接口,供其他网站及App使用 (3)后端程序员是开放平台开发的主力军 2.公众平台 (1) 基于微信公众号,为微信用户提供服务的平台 (2) 所用公众号,都属于微信内开发 (3)前端程序员是公众平台开发的主力军
小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
适合轻量简单的开发 快递类,商城类,餐饮类,教育。。。
优点: 1、不需要下载安装即可使用的应用 2、自带流量(12亿微信用户都可以使用) 3、开发难度低(html+css+js) 4、开发成本低 缺点: 1、代码大小默认只有2M 2、不能直接分享到朋友圈
信息登记
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mldbeduT-1620906177905)(img/day01-1.png)]
填写管理员信息
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XzLlaZKN-1620906177909)(img/day01-2.png)]
登陆之后,找到左侧设置,如下图:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iZBRUcwh-1620906177910)(img/day01-3.png)]
版本管理:
开发版
体验版
审核版
线上版
成员管理
管理员
项目成员
体验成员
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h0q3f9HV-1620906177912)(img/day01-4.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ceaxaC8-1620906177913)(img/day01-5.png)]
注意:域名必须是https协议,,域名必须被解析
首先小程序开发不同于普通的网页开发,项目不能运行在浏览器中,所以无法查看编程效果以及调试,微信开发者工具提供了代码的编程能力,调试能力以及展示运行效果能力等强大的功能
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q5ay0ywu-1620906177914)(img/day01-6.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uTGzf1fM-1620906177916)(img/day01-7.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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 页面的配置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ll4QDdZ2-1620906177918)(img/day01-9.png)]
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 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、在最后一项后边不要添加逗号
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象,有以下属性 注意:不需要指定window { "navigationBarBackgroundColor":"#ff0", "navigationBarTitleText":"首页" }
获取到进入小程序的途径/场景
KFC 搜索小程序:进入到首页 到店,扫描桌子二维码,进入到点餐
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) }, })
小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。 在 JavaScript 的基础上,我们增加了一些功能,以方便小程序的开发: 增加 App 和 Page 方法,进行程序注册和页面注册。 增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。 提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。 提供模块化能力,每个页面有独立的作用域。 注意:小程序框架的逻辑层并非运行在浏览器中,因此 JavaScript 在 web 中一些能力都无法使用,如 window,document 等。
App({ onLaunch,onShow,onHide生命周期函数 // 只执行一次 onLaunch(){ console.log("onLaunch-监听小程序初始化") }, // 每次进入到这个小程序时都执行 onShow(){ console.log("onShow-监听小程序启动或切前台") }, onHide(){ console.log("onHide-监听小程序切后台") }, one rror(err){ console.log("onError-错误监听函数。",err) }, onPageNotFound(){ console.log("页面不存在") wx.switchTab({ url: './pages/index/index', }) } })
写在页面的js文件里即可 let app = getApp() let {name,age} = app.userinfo console.log(name,age)
Page({ // 生命周期 // 只加载一次,在onLoad里options 可以接收参数,注意:在tabber页面无法接参 onl oad(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 onl oad - B onShow - B onReady 进入到一个小程序: 小程序onLaunch-小程序的onShow-页面的onLoad - 页面的onshow - 页面的onready 离开一个小程序: 页面的onHide - 小程序的onHide
可以将一些公共的代码抽离成为一个单独的 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)
组件是视图层的基本组成单元。 组件自带一些功能与微信风格一致的样式。 一个组件通常包括 开始标签 和 结束标签,属性 用来修饰这个组件,内容 在两个标签之内。
所有组件都有以下属性:
属性名 | 类型 | 描述 | 注解 |
---|---|---|---|
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>
基本数据绑定 {{}} 语法 属性绑定 <!-- 属性绑定: 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>