2.4:微信公众平台-小程序(重点)
微信通讯产品:腾讯公司(超过10亿用户)
BATJ(百度/阿里/腾讯/京东)
微信公众平台(订阅号/小程序/小游戏)
订阅号:个人媒体平台(文章/音频/视频)
微信小程序:中小企业和个人(轻量级app)
2.5:微信公众平台--小程序(重点)-注册帐户
(1)微信公众平台
https://mp.weixin.qq.com/
(2)立即注册
订阅号 服务器 (*)小程序 企业微信
(3)邮箱(没有在微信平台使用订阅号小程序....）
(4)注册主体类型
-企业和机构
(1)上传企业基本信息加盖公章图片清晰
(2)主体类型不能修改
(3)微信支付/卡包/附近小程序-面向企业
-个人
2.6:微信公众平台-小程序(重点)-登录
https://mp.weixin.qq.com/
(1)邮箱/密码
(2)左侧菜单开发选项 点击。
(3)开发设置 点击
(4)appid:小程序密钥
(5)左侧菜单:版本管理
开发版本-->审核版本->线上版本
2.7:微信公众平台--小程序(重点)-下载开发者工具
(1)微信开发工具下载地址https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
(2)安装下一步
(3)用手机微信扫二维进入工具
(4)创建项目
2.8:微信公众平台-小程序(重点)-工具
云开发:开通云开发->打开云开发管理界面
编译:将所有代码重新编译执行最新结果
预览:将代码上传微信服务器,使用手机微信扫描看到程序结果
上传:将项目上传微信服务器[开发版本]
详情:项目详细
(1)调试基础库
注意事项:每一个小程序项目不能超过2MB
2.9:微信公众平台-小程序(重点)-目录结构
2.10:微信公众平台-小程序(重点)-如何创建页面
exam01/
exam01.wxml 类似html
exam01.WXss 类似css
exam01.json 配置文件
exam01.js 类似js
2.11:微信公众平台--小程序(重点)-wxm|
小程序wxml微信xml
#严格匹配置开始结束标签
常见标签
view 相当于<div> #块级元素
text 相当于<span> #行内元素.
image 相当于<img src="" />
form 相当于<form></form>p
...
常见错误：
(!)expect end-tag `text` 缺少结束标签
(2)模拟器没有任何内容关闭网络防火墙
(3)输入中文不成功关 闭开发工具再启动
(1)文本标签
<text selectable="true"> </text>
selectable="true"
文本的内容可以复制
(2)图片
<image src=" 1.jpg" lazy-load=‘true‘></image>
lazy-load=‘true‘懒加载:等 待图片下载成功后再显示
图片内容
图片默认320*240图片
2.12:微信公众平台--小程序(重点)-wxss
wxss是一套用于小程序的样式语言,功能描述组件
(1)单位:rpx(responsive pixel)响应式像素,可以根据屏幕
宽度自适应调用图片文字容器大小
图片默认320* 240图片
2.12:微信公众平台--小程序(重点)-wxss
WXSS是一套用于小程序的样式语言,功能描述组件
(1)单位:rpx(responsive pixel)响应式像素,可以根据屏幕宽度自适应调用图片文字容器大小
(2)引入外部样式文件@import "./base.wxss"
2.13:微信公众平台-小程序(重点)-rpx
问题:移动端开发你使用哪个像素
-前端设计师:设计稿图片 物理像素
-前端开发:css 逻辑像素
示例:iphone6(2)/iphone plus(3)
逻辑像素* dpr=物理像素
iphon6 375px* 2= 750
iphon6plus ?
小程序解决方案: rpx响应式像素
(iphone6) 750rpx逻辑像素=== 750物理像素
2.14:微信公众平台-小程序(重点)-引入其它样式文件
#将项目公众样式内容统一保存在 一个文件中
style/common.WXSS
exam01.WXSS
11
@import
../s.yte/common/wxss"
#引入其它样式文件一定用相对路径
https://developers.weixin.qq.com/miniprogram/dev/framework/