目录
微信小程序的介绍, 如何上手小程序, 开发的框架, 组件, api, 技能与实战, 注意事项.
介绍
为啥会有小程序, 因为市场的需要, 小程序可是什么呢? 小程序是一种用完即走的那么一种模式, 从开始的 B2C 模式, 人与商品, 到 P2P 模式, 人与人, 在到 C2P 模式, 人与服务, 小程序就是那么一种人与服务, 小程序不用下载?
不是的, 只是它的下载很小, 你根本体会不到它的下载, 而且对于那种要停留下来很久的, 小程序一般不适用, 对于订票, 购票, 小游戏, 等, 用于对某款 APP 中的某功能划分出来做小程序很实用, 是用来服务人的产品, 想我们手机中的支付宝, 里面有很多功能镶入到框框里.
小程序的日常应用, 如去一家店吃面时, 不用叫服务员点餐而是有个二维码在你的桌上, 用你的手机扫一扫就行.
概述
小程序是不需要安装的, 可以立即使用, 实现了 "触手可及" 的梦想, 以及 "用完即走" 的理念, 用户不用担心安装太多应用导致内存不足的问题, 小程序无处不在.
小程序的好处
小程序的好处. png
开发准备
注册小程序账号
激活邮箱
信息登记
登录小程序后台
完善信息
绑定开发者
小程序版本 | 名称 |
---|---|
1 | 开发版本 |
2 | 体验版本 |
3 | 审核版本 |
4 | 线上版本 |
小程序的结构
小程序的结构. png
结构名称 | 意义 |
---|---|
app.js | 注册微信小程序应用 |
app.json | 小程序的全局 配置,网络超时时间以及路径 |
app.wxss | 全局的样式 |
project.config.json | 保存我们的微信开发者的配置信息 |
pages | 所有的小程序页面 |
utils | 存放的一些工具的函数,达到代码复用的目的 |
Pages 具备属性
- tabBar
- networkTimeout
- debug
- navigationStyle
- navigationBarBackgroundColor
- navigationBarTextStyle
- navigationBarTitleText
- backgroundColor
- backgroundTextStyle
- onReachBottomDistance
- enablePullDownRefresh
page 具备属性
- navigationBarBackgroundColor
- navigationBarTextStyle
- navigationBarTitleText
- backgroundColor
- backgroundTextStyle
- onReachBottomDistance
- enablePullDownRefresh
- disableScroll
微信小程序完整的开发框架, api 等
基本构成
- wxml
- wxss
- wxs
- javascript
- wxml
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
- wxss
样式. 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>
wxss 目前支持的选择器:
- .class
- #id
- element
- element,element
- ::after
- ::before
微信小程序 JavaScript
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
API.png
格式具备:
wx.on
object 参数
- wx.get/wx.set
- success
- fail
- complete
结语
本文主要讲解 微信小程序开发基础
来源: http://www.jianshu.com/p/928322b05ed0