基础问题
一、appleID的获取
https://mp.weixin.qq.com/wxopen/basicprofile?action=index&token=767275273&lang=zh_CN
在开发设置选项 => AppID(小程序ID)
二、文件类型
1、app.js 脚本文件 2、app.json 配置文件 3、app.wxml 页面结构 4、app.wxss样式文件
三、app.json全局配置
{
// 页面路径
"pages": [
"pages/index/index", // 初始显示的组件用
"pages/logs/index"
],
// 默认页面窗口表现
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#0E77CA",
"navigationBarTitleText": "小程序Example",
"navigationBarTextStyle": "#fff",
"enablePullDownRefresh": true,
},
// 底部tab的表现
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
},
// 设置网络超时时间
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
// 是否开启debug模式
"debug": true,
"workers": '', // 多线程代码放置的目录
"pageOrientation": "auto", // 是否启用屏幕旋转
"subpackages": {}, // 分包结构配置
"resizable": true, // iPad上是否启用屏幕旋转
}
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
五、sitemap.json配置
文件用于配置小程序及其页面是否允许被微信索引
Page() 用来注册一个页面
指定页面的初始数据、生命周期、事件处理
一、生命周期
/** 监听页面加载 **/
onLoad: function (options) {
console.log(options);
},
/** 监听页面初次渲染完成 **/
onReady: function () {
},
/** 监听页面显示 **/
onShow: function () {
},
/** 监听页面隐藏 **/
onHide: function () {
},
/** 监听页面卸载 **/
onUnload: function () {
},
/** 页面相关事件处理函数--监听用户下拉动作 **/
onPullDownRefresh: function (e) {
this.setData({
updata: JSON.stringify(e)
})
console.log(e)
},
/** 页面上拉触底事件的处理函数 **/
onReachBottom: function (e) {
this.setData({
updata: JSON.stringify(e)
})
console.log(e)
},
/** 用户点击右上角分享 **/
onShareAppMessage: function () {
}
二、属性、方法
data - 页面初始数据, WXML中调用 {{test}}
onload - 监听页面加载
onReady - 监听页面初次渲染完成
onShow - 监听页面显示
onHide - 监听页面隐藏
onUnload - 监听页面卸载
onPullDowRefesh - 监听用户下拉动作
onReachBottom - 上拉触底事件
onShareAppMessage - 用户点击右上角转发
onShareAppMessage: function () {
return {
title: '自定义转发标题',
path: '/page/user?id=123'
}
}
onPageScroll - 页面滚动触发
三、绑定事件
<view bindTap="viewTap">click me</view>
Page({
data:{
message: 'view tap'
},
viewTap: () => {
console.log(this.message);
}
})
五、Page.prototype.route - 获取当前页面的路径
六、Page.prototype.setData() - 用于将数据从逻辑层发送到视图层，同时改变对应的this.data的值
Page({
data:{
username: 'siguang'
}
login: ()=>{
this.setData({
username: 'lulu'
})
}
})
路由
所有页面的路由全部由框架管理
一、页面栈
1、初始化 - 新页面入栈
2、打开新页面 - 新页面入栈。 调用 API wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/>
3、页面重定向 - 当前页面出栈，新页面入栈。 调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>
4、页面返回 - 页面不断出栈，直到目标返回页，新页面入栈。 调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮
5、Tab - 切换 页面全部出栈，只留下新的 Tab 页面。 调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab"/> 或用户切换 Tab
6、重加载 - 页面全部出栈，只留下新的页面。 调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>
Example:
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
}
二、getCurrentPages() 获取当前页面的栈的实例
三、Tips
navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
模块化
一、全局变量和方法
全局方法通过 getApp()获取全局的应用实例
全局数据设置:
App({
globalData: 1
})
二、模块化
1、exports 导出
module.exports 或 exports对外暴露接口, exports是module.exports的一个引用
小程序不支持直接引入node_modules, 如果需要就将代码拷到目录中
// common.js
function sayHello(name){
console.log(`Hello ${name}`);
}
module.exports.sayHello = sayHello;
2、require 引用
const conmmon = require('common.js');
Page({
helloMina: () =>{
common.sayHello('mina');
}
})
视图层
一、WXML
1、数据绑定
普通绑定: <view>{{message}}</view>
属性绑定: <view id="item-{{id}}"> </view>
控制属性: <view wx:if="{{condition}}"> </view>
2、循环渲染
// 注意这里取到当前数据要用item
<view wx:for="{{arr}}">{{item}}</view>
数组下标:
<view wx:for="{{arr}}">
序号:{{index}} 姓名:{{item.name}} 年龄:{{item.age}}
</view>
两者相同
<view wx:for="{{arr}}" wx:for-index="idx" wx:for-item="itemName">
姓名:{{itemName.name}} 年龄:{{itemName.age}} 序号:{{idx}}
</view>
3、条件渲染
<view wx:if="{{view == 'webView'}}">web view</view>
<view wx:elif="{{view == 'app'}}">app</view>
<view wx:else="{{view == 'mina'}}">mina</view>
Page({
data: {
view: 'app'
}
})
4、模板
name: 模板名 is: 所要调用的模板名 data: 传入的数据
<template name="staffName">
<view>
FirstName: {{firstName}}, lastName: {{lastName}}
</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
Page({
data: {
staffName: {fristName: 'sigunag', lastName: 'haha'},
staffName: {fristName: 'yuwan', lastName: 'lulu'},
}
})
WXSS 样式语言
尺寸单位: rex, 可以根据屏幕宽度自行自适应
一、样式导入
@import 'common.wxss'
.middle-p {
padding: 15px;
}
二、内联样式
data: {
color: '#ddd'
}
<view style="color: {{color}}">
<view class="middle-p"> // 多个class使用空格分隔
三、全局、局部样式
定义在app.wxss中的样式为全局, 每个页的wxss为局部样式
四、选择器
.class, #id, element, element, element, ::after, ::before
WXS 脚本
小程序自己的一套脚本语言, 可以直接编写到WXML中, 也可以单独写成一个.wxs文件
一、写到wxml中
<!-- index.wxml>
<wxs module="m1">
var msg = 'hello world';
module.exports.message = msg
</wxs>
<view>
{{m1.message}}
</view>
二、写成一个.wxs文件
// pages/comm.wxs
// 如果comm.wxs文件中要引用其它的wxs文件使用require, var tool = require('./tools.wxs');
var foo = "'hello world' from comm.wxs";
var bar = function(d) {
return d;
}
module.exports = {
foo: foo,
bar: bar
};
// 页面引用
<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
事件
<view bindtap="add">{{count}}</view>
Page({
data: {
count: 1
},
add: (event)=>{
this.setData({
count: this.data.count++
})
}
})
一、事件分类
分为冒泡事件和非冒泡事件
冒泡事件: bindtouchstart 前面加bind
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
touchend 手指触摸动作结束
tap 手指触摸后马上离开
longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 1.5.0
longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart 会在一个 WXSS animation 动画开始时触发
animationiteration 会在一个 WXSS animation 一次迭代结束时触发
animationend 会在一个 WXSS animation 动画完成时触发
事件绑定和冒泡:
bind 不会阻止冒泡事件向上冒泡，bindtap
catch 可以阻止冒泡事件向上冒泡。catchtap
事件捕获:
捕获阶段监听事件时，采用capture-bind、capture-catch关键字, 后者将中断捕获阶段和取消冒泡
事件对象:
baseEvent对象
二、view、block标签
view 渲染单独一行类似块元素
block 渲染成内联元素
引用
提供两种引用方法import 和 include
一、import 引用外部的<template>模板
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
<!-- index.wxml -->
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
二、include 引用非<template>模板的文件，公用的头尾等
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>
运行机制
小程序两种启动方式:
冷启动: 用户首次打开或小程序被微信主动销毁后在次打开的情况，
热启动: 用户已经打开某个小程序，在一定时间内在次打开，此时无需重新启动，只需将后台切换到前台
开发总结
1、小程序初始指定页面
app.json中, 调整pages数组的顺序, 第一个就是最先被载入
"pages":[
"pages/my/my",
"pages/index/index",
"pages/logs/logs"
]
2、当前页面使用修改标题
在当前页面下的.json文件中加入
goods-details.json
{
"navigationBarTitleText": "商品详情"
}
3、获取元素上的自定义属性值
1) evt.currentTarget.dataset.propertyindex;
2) evt.detail
<view bindtap="labelItemTap" data-propertyindex="{{idx}}"></view> // 注意这里自定义属性需要以"data-"开头，并且不能为大写，如果有大写取值时全部为小写
js:
labelItemTap: function(evt){
let val = evt.currentTarget.dataset.propertyindex;
}
4、在app.json中配置pages的路径会自动创建目录和基本文件这里
这里注意创建js时候会将生命周期方法和上拉下拉刷新方法全部都创建好，不必重写 onPullDownRefresh()、onReachBottom();
问题
如果修改 checkbox 的样式
时间选择器只有时、分，没有秒
slider滑动组件拖动块不能改颜色
小程序下拉刷新不触发 onPullDownRefresh
小程序与RN相比
小程序布局写法简单，RN的布局比较麻烦
小程序的组件简单，RN组件麻烦，并且IOS和Android兼容
RN可以随意发起网络请求访问数据，小程序需要指定服务器并且需要https协议
RN需要与通过Xcode来进去打包、并且需要在appStor进行发布审核
RN做的app需要到商店下载使用，小程序发布后在微信就可以找到
API
1、getApp() 取App实例, 下面可以设置globalData来设置全局数据
const app = getApp();
app.globalData.userInfo; // 获取当前用户信息
2、getCurrentPages(): 数组中第一个元素为首页，最后一个元素为当前页面
setTimeout、setInterval定时器
一、网络
1、wx.request: 网络请求
wx.request({
url:url,
data:data,
header:{
"Content-Type":"application/json"
},
success:function(res){
console.log(res.data)
},
fail:function(err){
console.log(err)
}
})
2、wx.uploadFile: 上传文件
3、wx.downloadFile: 下载文件
4、wx.webSocket: 都需要设置指定的服务器
app.json中通过networktimeout配置超时时间
二、存储
1、wx.setStorage/wx.setStorageSync: 存储到Storage上
2、wx.getStorage/wx.getStorageSync: 获取Storage的数据
3、wx.clearStorage/wx.clearStorageSync: 清除
4、wx.removeStorage/wx.removeStorageSync: 删除某一个
三、文件系统
const fs = wx.getFileSystemManager()
四、多线程Worker
app.json中配置 { "workers": "workers" }
Worker.postMessage() 来发送数据
Worker.onMessage() 来接收数据
五、服务端
getAccessToken: 获取access_token，是小程序全局唯一后台接口调用凭据
code2Session
六、硬件
1、wx.openBluetoothAdapter: 打开蓝牙
2、wx.closeBluetoothAdapter: 关闭蓝牙 或小程序被销毁为止
七、消息
wx.getSystemInfo 或者 wx.getSystemInfoSync 获取小程序的基本库版本
wx.canIUse 判断是否可以在该基础库版本下直接使用对应的API或者组件
####
一、input的双向绑定
<input placeholder="这是一个可以自动聚焦的input" class="inp" bindinput="inpValue" />
{
inpValue(e){
}
}
| http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html // 公众服务平台所有的sdk
| https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=20171013 // 小程序
| https://www.w3cschool.cn/weixinapp/9wou1q8j.html
| http://203.195.235.76/jssdk/ 小程序demo
| https://github.com/gooking/awesome-wechat-weapp 微信小程序开发资源汇总