小程序是什么
1.目前公司主流前端技术：H5，JS，vue,小程序，Flutter，React
2.微信小程序是一种不需要下载安装即可使用的应用(腾讯)
3.微信小程序发布时间2017年1月9号
4.商业模式利于产品推广
小程序使用流程
1·注册微信小程序
2.注册网址：https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=1082525774&lang=zh_CN
3. AppID(小程序ID) wx94a1f72e6b50a0ef
4.文档-->工具-->微信开发者工具-->稳定版的windows64-->开始下载工具
小程序开发和H5开发的区别
H5 : ECMAScript, DOM, BOM
1.有完整的DOM API和BOM API。例如：getElementById, Window ,Location
2.网页开发渲染线程和脚本线程是互斥的
小程序 ：
1.缺少相关的DOM API和BOM API
2.网页开发渲染线程和脚本线程是分开的
微信小程序开发目录结构
utils: 存放平时开发时常用的工具函数
app.js: 小程序项目的逻辑入口 相当于vue中的main.js
app.json: 时小程序的全局配置文件，会影响每个页面的配置
app.wxss：是小程序的全局样式 ， 会影响每个页面的样式
project.config.json :项目的配置文件（一般不需要改动）
sitemap.json :小程序的搜索蜘蛛（一般不需要）
pages:平时开发页面的目录 相当于vue中的src目录
index.js : 页面的JS逻辑
index.json :指当前页面的配置文件（注意：只能使用app.json中window的各种配置）
index.wxml:指当前页面模板 相当于html
index.wxss：指页面样式 相当于H5的css
text:嵌入文件 相当于H5中的span
block：逻辑包裹标签，最终不渲染到页面中 相当于vue中template标签
小程序常用标签：
view相当于H5的div
image:相当于H5中的img
block:相当于template
底部导航
"tabBar": {
"custom":"true"， //表示不使用默认的tabBar
"color": "#000",
"selectedColor": "#d81e06",
"list": [
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "/images/home.png",
"selectedIconPath": "/images/home1.png"
},
{
"text": "分类",
"pagePath": "pages/cate/cate",
"iconPath": "/images/home.png",
"selectedIconPath": "/images/home1.png"
},
{
"text": "商品",
"pagePath": "pages/shop/shop",
"iconPath": "/images/home.png",
"selectedIconPath": "/images/home1.png"
},
{
"text": "日志",
"pagePath": "pages/logs/logs",
"iconPath": "/images/cate.png",
"selectedIconPath": "/images/cate1.png"
}
]
},
如何再手机端测试
用手机微信扫描微信开发者工具的预览二维码来显示
微信小程序常用指令
遍历数组： wx:for="{{}}"
显示隐藏：wx:if="{{}}" 相当于 v-if
显示隐藏：hidden="{{}}" 相当于v-show
点击事件：<button bindtap="delete">删除</button>
阻止事件冒泡：catchtap="fn"
rpx单位
是多少px就是多少rpx
公共样式引入
@import “复用的样式路径”
支持内联样式：
<view style="color:{{ 变量 }}"></view>
动态class样式
class="btn {{ index===currentIndex?'active':'' }}
小程序的生命周期
1. App()
2.Page()
##全局数据管理
可以利用app.js中自定义变量，通过getApp（）来获取，并渲染到页面、
路由跳转
1. 标签 <navigator url="路径">
2. JS 点击方法中wx.navigateTo({url:"路径"})
路由传参：
let data = "列表页"
wx.navigateTo({
url:`/pages/list/list ? title=${data}`
})
接受 在onLoad生命周期中
let {title} = options
wx.setNavigationBarTitle({
title:title
})
特点 ： 自带返回按钮
3.通过wx.switchTab()才能跳转tabBar的分类页面中
没有返回按钮
4.用wx.reLaunch()既可以打开tabBar也可以打开非tabBar页面
特点：不能回退 只有跳到首页 按钮
5. 历史回退
wx.navigateBack()
小程序内置组件
swiper
scroll-view
组件穿透样式
options:{
styleIsolation:'apply-shared' //是否开启公共样式穿透
},
externalClasses:['my-bg'],//指定使用外部样式类
数据请求
语法：wx.request({
url:"接口地址", *必须是https的协议
methods:"get",
data:{
这里是请求数据
},
header:{
'content-type' : 'application/text'
},
success(res){
console.log(res)
},
fail(err){
console.log(err)
},
complate(){
console.log(“无论成功或失败我都执行”)
}
)}
***注意：1. 在小程序工具的详情里 ，不校验合法域名的勾选上
2. 或者在小程序后台开发-->设置添加request域名
***注意：网络请求会有延迟，通常请求过程中加入loading
显示：wx.showLoading()
隐藏：wx.hideLoading()
可以在本地服务器环境来访问json
下载npm install http-server -g
运行时 hs -p 端口号 -o
例如：hs -p 8888 -o
p:时指定端口
o：时自动打开浏览器
mock模拟数据
文档地址：https://github.com/webx32/WxMock
第一步：复制mock.js和wxmock.js文件到utils目录下
第二步：在app.js引入wxmock代码
var Mock = require("./utils/wxmock.js")
第三步：Mock.mock("模拟地址",{
"code":200,
"data|1-20":[
{
"name":function() {
return Mock.Random.cname()
},
"lastLogin":function() {
return Mock.Random.datetime()
}
}
]
})
封装api接口
新建文件夹http
1.在http下新建env.js文件
//设置公共url
//commonJS规范
module.exports={
//开发环境
dev:{
baseUrl:"http://localhost:3000"
},
//测试环境
test:{
baseUrl:"http://www.test.com"
},
//线上环境
prod:{
baseUrl:"https://api.it120.cc"
}
}
2.在http下新建request.js文件
//引入env中的url
const { baseUrl }=require('./env.js').prod
const subDomain = 'mym'
module.exports={
//二次封装wx.request
/*
*url（string）路径
*method(string)请求方式
*data(object)传递参数
*isSubDomain(Boolean)次域名 ,true和false
*/
request:(url,method,data,isSubDomain)=>{
let _url=`${baseUrl}/${isSubDomain ? subDomain:''}${url}`
return new Promise((resolve,reject)=>{
wx.showLoading({
title:"加载中"
})
wx.request({
url: _url,
data:data,
method:method,
header:{
'content-type':'application/x-www-form-urlencoded' //公司的提交参数地址
},
success:(res)=>{
let {code}=res.data;
if(code===0){
resolve(res.data)
wx.hideLoading()
}else{
wx.showToast({
title: '有误',
})
}
},
fail:(err)=>{
reject('数据请求有误',err)
}
})
})
},
}
3.在http下新建api.js文件
//引入request.js文件
const {request}=require("./request.js")
//基于业务封装的数据请求
module.exports={
//封装商品列表
getGoodsList:()=>{
console.log("获取商品列表数据")
return request('/shop/goods/list','post',{},true)
},
//商品收藏
addGoodsFav:(goodsId,token)=>{
return request('/shop/goods/fav/add','post',{goodsId:goodsId,token:token},true)
},
}
4.使用封装的接口 在pages下的js文件里
const {getGoodsList,addGoodsFav}=require("../../http/api.js")
Page({
data: {
goodsList:[]
},
//测试接口方法getApi
getApi(){
getGoodsList().then(response=>{
console.log(response)
this.setData({
goodsList:response.data
})
})
let goodsId="417361"; //应该传值过来，我这里写死的
let token="3ce42d92-492b-4e2b-acf4-ba4fa8907bd2" //应该传值过来，我这里写死的
addGoodsFav(goodsId,token)
}
)}
5.wxml页面上渲染数据
<view wx:for="{{goodsList}}" wx:key="index">
{{item.characteristic}}
</view>
