为啥会有小程序,因为市场的需要,小程序可是什么呢?小程序是一种用完即走的那么一种模式,从开始的B2C模式,人与商品,到P2P模式,人与人,在到C2P模式,人与服务,小程序就是那么一种人与服务,小程序不用下载?
不是的,只是它的下载很小,你根本体会不到它的下载,而且对于那种要停留下来很久的,小程序一般不适用,对于订票,购票,小游戏,等,用于对某款APP中的某功能划分出来做小程序很实用,是用来服务人的产品,想我们手机中的支付宝,里面有很多功能镶入到框框里。
小程序的日常应用,如去一家店吃面时,不用叫服务员点餐而是有个二维码在你的桌上,用你的手机扫一扫就行。
小程序是不需要安装的,可以立即使用,实现了“触手可及”的梦想,以及“用完即走”的理念,用户不用担心安装太多应用导致内存不足的问题,小程序无处不在。
小程序的好处.png
小程序版本 |
名称 |
---|---|
1 |
开发版本 |
2 |
体验版本 |
3 |
审核版本 |
4 |
线上版本 |
小程序的结构.png
结构名称 |
意义 |
---|---|
app.js |
注册微信小程序应用 |
app.json |
小程序的全局 配置,网络超时时间以及路径 |
app.wxss |
全局的样式 |
project.config.json |
保存我们的微信开发者的配置信息 |
pages |
所有的小程序页面 |
utils |
存放的一些工具的函数,达到代码复用的目的 |
tabBar networkTimeout debug navigationStyle navigationBarBackgroundColor navigationBarTextStyle navigationBarTitleText backgroundColor backgroundTextStyle onReachBottomDistance enablePullDownRefresh
navigationBarBackgroundColor navigationBarTextStyle navigationBarTitleText backgroundColor backgroundTextStyle onReachBottomDistance enablePullDownRefresh disableScroll
wxml wxss wxs javascript
wxml.png
模板引用:1. import ;2. include
// index.wxml <import src="a.wxml"></import> <template is="a"></template> // a.wxml <view>hello</view> <template name="a"> hello,hello </template> // 结果 hello,hllo
// index.wxml <import src="a.wxml"></import> <template is="a></template> // a.wxml <import src="c.wxml"> <template name="a"> this is a.wxml </template> <tempalate is="b"></template> // b.xml <template name="b"> this is b.wxml </template> // 结果 this is a.wxml
// index.wxml <include src="a.wxml"/> <template is="a"></template> // a.wxml <template name="a"> <view> this is a.wxml </view> </template> <view>hello</view> // 结果 hello
样式.png
wxss特殊之样式
// index.wxml <view class="container"> hello </view> // index.wxss @import './asssets.wxss'; .container { color: red; }
// assets.wxss .container { border: 1px solid #000; }
// index.wxml <view style=""> </view>
.class #id element element,element ::after ::before
JavaScript.png
onLaunch onShow onHide onError
onLoad 监听页面加载 onShow 监听页面显示 onReady 监听页面初次渲染完成 onHide 监听页面隐藏 onUnload 监听页面卸载
不用马上懂,别做项目别懂就行。
生命周期
事件.png
框架-事件.png
组件.png
视图容器组件:
view,scroll-view,swiper,movable-view,cover-view
基础内容
icon,text,rich-text,progress
表单组件:
button,checkbox,form,input,label,picker,picker-view,radio,switch,text-area
媒体组件
audio,image,video,live-player,camera,live-pusher
导航组件
navigato
地图组件
mapj
画布组件
canvas
开发能力组件
open-data web-view
API.png
格式具备:
wx.on object参数 wx.get/wx.set success fail complete 张家口微信小程序开发基础