文章目录
1、关于微信小程序
- 不需要下载安装即可使用
- 触手可及(扫一扫,搜一下打开应用)
- 用完即走
- 利用了html/css/js的语法,可以完成像安卓/ios一样的功能、界面的制作(h5只能模仿安卓/ios来做界面,无法完成一些功能性的操作;h5 没办法调手机的相机拍照,小程序可以)
2、开发准备工作
- 微信小程序账号申请 - 获得appid
- 云操作必须有appid
- 发布到微信上正式使用也需要appid
邮箱激活 - 邮箱需要是不能在微信 或 腾讯系里用过
申请完账号, 点击“设置”完善资料后, 找到appid
保存下,后期会用
- 下载微信开发者工具
使用微信开发者工具时 ,需要先关掉windows防火墙,防火墙默认把所有接口都关了
点击 编译—进行保存
3、修改配置文件App.json
创建项目后第一步,修改配置文件App.json:
- 里面不能写注释
- 最后一项不能加, 加了, 编译会报错
3.1 配置导航头
{
"pages": [ //页面
"pages/index/index", //不能加后缀,由4个文件组合而成
"pages/logs/logs" //每个{}内最后一项不能加, 加了, 编译会报错
],
"window": { //窗口配置--全局配置
"backgroundTextStyle": "dark", //light/dark --页面刷新时loading点的变化效果
"navigationBarBackgroundColor": "#000", //头部背景色
"navigationBarTitleText": "我的微信", //导航头部的文本
"navigationBarTextStyle": "white", //头部文字颜色
"enablePullDownRefresh": true, //开启下拉刷新
"backgroundColor": "#ddd" //下拉刷新时的背景色
},
"sitemapLocation": "sitemap.json" //站内地图/站内导航/站内搜索,具体搜索情况在sitemap.json中写的,搜索小程序时,是否被收录
}
3.2 配置底部触摸栏
触摸栏不是菜单,至少放2项,最多放5项
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "我的微信",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": true,
"backgroundColor": "#ddd"
},
"sitemapLocation": "sitemap.json",
//--------------配置底部触摸栏--------输入“tabbar" 回车,会帮我们补全代码---------
"tabBar": { //底部触摸栏
"borderStyle": "black", //边框色
"selectedColor": "#000000",//选中色,选中时字体的颜色
"list": [
{
"pagePath": "pages/index/index", //点击跳转的路径,路径格式按照pages里的路径格式来写,如果这个链接在页面中有跳转,设置为底部触摸栏后,页面的跳转就会失效
"text": "首页", //文本
"iconPath": "/images/icon_1.png", //图标,新建一个和pages同级的文件夹images
"selectedIconPath": "/images/icon_11.png" //选中图标
},{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "/images/icon_2.png",
"selectedIconPath": "/images/icon_22.png"
}
]
}
}
4、新页面的创建及组成
4.1 微信新页面的创建方式有3种
1.从app.json文件开始创建
app.json中的pages里加一条路径,然后编译就会生成对应的文件夹
一个页面由4个文件组成,
2.单个文件逐一创建
pages右键新建目录(写文件夹名)–然后再右键新建page 就会生成对应的文件夹,同时在app.json中生成对应的路径
3.删除文件后的编译自动创建
4.2 展示新建页面
1.app.json中:把要查看的页面放在第一个路径的位置
"pages": [
"pages/index/index", //第一个路径称为基础路径,默认显示这个路径里的内容,起始页位置
"pages/logs/logs",
"pages/about/about"
],
- 添加编辑模式
4.3 组成页面结构的不同文件
WXML -> HTML
WXSS -> CSS
JS -> Javascript
JSON -> Javascript(json对象)
App -> application
编码要求:
-
不能直接使用HTML文件,没有div,span等
-
可以全部使用CSS文件
-
Js脚本文件没有Window对象
wxml中常用标签:
text标签:相当于html里的font+span,内联级元素
view标签:相当于div标签,块级元素
5、生命周期
微信小程序每个页面都有一个生命运行周期可以操作,同时小程序本身也自带对象的创建生命周期
生命周期名称,事件名
- onLaunch: -> 创建小程序最开始的对象的一个初始化的方法,完成刚开始结构化的操作,小程序App的对象初始化(打开那一刻)要完成的功能
- onload -> 生命周期函数 - 监听页面加载
pages里每个页面打开的时候,每个页面初始化的时候会启动onload - onReady -> 生命周期函数 - 监听页面初次渲染
所有渲染都完成后的方法提示 - onShow -> 生命周期函数 - 监听页面显示
- onHide -> 生命周期函数 - 监听页面隐藏
- onUnload -> 生命周期函数 – 监听页面卸载
不需要我们操作,微信给我们完成
- onPullDownRefresh -> 页面监听相关处理函数 – 监听用户下拉动作
- onReachBottom -> 页面上拉触底事件的处理函数
- onShareAppMessage -> 用户点击右上角分享
任何一个小程序都是一个叫做App的对象,所以小程序的入口是从app.js 里创建app开始的
6、微信小程序调试步骤
- 逻辑代码调式方法
- 控制台显示方式
console.log()
console.info()
- 弹出框(API框架时介绍)
show(){
wx.showToast({ //等于alert,但因为小程序里没有window,所以不能alert
title:'弹窗内容',
})
}
- 模拟,真机调式模式
点击编译,预览,真机调试
7、微信小程序上线审核 和 发布
- 点击上传 是上传到微信云,这个云关联到我们的公众号,也就是上传时上传到微信公众平台(订阅号 或者服务号)—进入
小程序管理
进行关联 - 只有关联后,以后上传就上传到公众平台,由公众平台进行发布
- 微信开放平台 – 主要是安卓,ios移动端原生开发的接口的操作
- 微信公众平台 – 主要是微信的小程序,小游戏的操作(微信公众平台需要是订阅号 或者服务号)
8、基础组件的使用-icon/text/button/input
8.1 Icon图标组件
- type:图标类型,值有:
success,success_no_circle,info,warn,waiting,cancel,download,search,clear
- size:图标大小, 23默认值,单位像素
- color:图标颜色
<view class="container">
<icon type='success' size='28'></icon>
<icon type='success_no_circle' color='red'></icon>
<icon type='warn' size='23'></icon>
<icon type='clear'></icon>
</view>