一、下载
App 从应用商店（如 App Store）里下载；小程序 通过微信（扫描二维码、搜索）直接获得；
二、安装
App 安装在手机内存中，就像自己买了辆车放在车库里随时开；小程序不需要安装，就像免费用嘀嘀打车，召之即来用完拜拜；
三、占用空间
App 会一直存在手机中占用空间，太多的 App 可能会导致内存不足；小程序因为不需要安装，占用内存空间忽略不计；
四、广告推送
App 会隔三差五给用户推送广告，太多未读提示会逼死强迫症；小程序不允许主动给用户发送广告，仅能回复模版消息；
五、机会
App市场已经饱和，几乎所有的领域都已经被覆盖；小程序是一片蓝海，在新的使用场景下有很多瓜分蛋糕的好机会；
六、开发
App 需要适配市场上很多款的主流手机，开发成本大；小程序 一次开发就可以自动适配所有手机；
七、发布
App 需要向十几个应用商店提交审核，且每个应用商店要求的资料都不一样，非常繁琐；小程序 只需要提交到微信公众平台审核 ；
八、用户群
App 面向所有智能手机用户，截止2015年约19亿台；小程序面向所有微信用户，约8亿人 ；
九、开发周期
一款完善的双平台 App 平均的开发周期约3个月；小程序 平均开发周期约2周，仅为App的六分之一；
十、功能
App 可以实现完整功能 ；小程序 仅限微信提供的接口功能；
a、使用频率高而且还很重要不适合用微信小程序，应该用原生的app开发
b、使用频率低而且很重要应该用微信小程序开发
c、使用频率高但是不重要应该用小程序为入口导向原生app
d、使用频率不高也不重要优选小程序开发
https://developers.weixin.qq.com/miniprogram/dev/api/
注册微信小程序开发
https://mp.weixin.qq.com/cgi-bin/wx
下载微信开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
基本组件
app.json
tabBar 导航一般 二至四个
炳汉的独白
{
"pages":[
"pages/index/index",
"pages/demo/demo",
"pages/test/test"
],
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/demo/demo",
"text": "demo页"
},
{
"pagePath": "pages/test/test",
"text": "测试页"
}
]
}
}
index.wxss
组件样式
{{}} 引入数据
点击事件 bindtap
<!--pages/index/index.wxml-->
<text>pages/index/index.wxml</text>
<button type="default" bindtap="btnClick">白色按钮</button>
<button type="primary">绿色按钮</button>
<button type="warn">红色按钮</button>
<text>{{name}}</text>
index.js
this 代表当前页面Page
/**
* 页面的初始数据
*/
data: {
name: "index 中 name 的内容"
},
btnClick: function() {
/**
* 修改 data 数据 name
*/
this.setData({name: "按钮点击修改 name 的内容"})
},
条件渲染
在框架中，使用 wx:if="" 来判断是否需要渲染该代码块
<button type="warn" wx:if="{{flag}}">红色按钮</button>
列表渲染
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
<view wx:for="{{arr}}">
序号{{index}}：{{item}}
</view>
data: {
name: "index 中 name 的内容",
flag: false,
arr: ["甲","乙","炳","丁","戊"]
}
shift 删除第一个 unshift 新增一个
pop 删除最后一个 push 新增最后一个
返回值都是当前新增或者删除的元素
*JavaScript数组可以表现的像栈(LIFO)和队列(FIFO)一样操作。这也是JavaScript数组强大的可操作性的体现。*
shiftEle: function() {
// 从第一个元素开始删除
var arr = this.data.arr;
//arr.shift(); // 从第一个开始删除
//arr.pop(); // 从最后一个开始删除
arr.unshift(arr.pop()); // 元素向下走
this.setData({arr: arr});
}
我们的小程序中，可能很多页面都是使用同一个顶部与同一个底部，这一部分的代码就可以被很多页面所共用，这种情况下，我们就可以把这部分内容单独提取成一个模板，每个页面都将其加载进来即可。
在Pages目录下新建一个目录名为template，在其下新建一个wxml文件，我们在这个文件里写我们的模板。模板的使用有两种方式
wxml
<template name="footer1">
这个是底部的数据1
</template>
<template name="footer2">
这个是底部的数据2
</template>
<text>这个是头内容</text>
通过include引入 相当于页面内容全部 包含
<include src="../template/header.wxml"/>
通过import引入 先引入 在选择使用
<import src="../template/footer.wxml"/>
<template is="footer2"/>
事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如id, dataset, touches。
点击、长按、触摸事件
点击、长按、触摸都属于冒泡事件 会触发冒泡、子标签传递父标签
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡
navigator 组件 url 实现跳转：只能跳转除了 tabBar 的页面
跳转组件
<!-- 组件完成跳转-->>
<navigator url="../log/log">跳转 log</navigator>
页面标题 修改页面 json 文件
"navigationBarTitleText": "日志页面"
新增图片 添加目录 images
全局 app.json 配置
"iconPath": "images/fenlei.png",
"selectedIconPath": "images/fenlei-select.png"
JS 方法实现跳转
navigator 的 url 跳转
通过 onload 的 options 接收带参数的跳转
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
button 的 bindtap 绑定方法跳转
wx.navigateTo 可以返回上一层
wx.redirectTo 只能返回首页
wx.switchTab：只能跳转TabBar 页面
toLog1: function() {
wx.navigateTo({
url: '../log/log?name=法外狂徒&age=81',
})
},
toLog2: function() {
wx.redirectTo({
url: '../log/log?name=法外狂徒&age=81',
})
},
toTabBar: function() {
wx.switchTab({
url: '/pages/demo/demo',
})
},
全局变量、事件
app.js
// app.js
App({
globalData: {
id: 24,
appName: "小程序"
}
})
index.js
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 获取App对象
var app = getApp();
var appId =app.globalData.appId;
// 修改名字
app.globalData.appName = "新的名字"
var appName = app.globalData.appName;
console.log("全局参数：" + appId + "--" + appName)
},
data- 自定义的名字
<button bindtap="clickEvent" data-school="BliBli">传参的事件</button>
ev 为自定义 固定获取写法
/**
*
* @param {*} ev 事件对象
* ev.currentTarget 事件源
*/
clickEvent: function(ev) {
var school = ev.currentTarget.dataset.school;
// 发送 school
console.log("获取的事件源携带的参数："+school)
},
wx.request 发送请求url、header、success
<button bindtap="getQuestions">发送网络请求</button>
getQuestions: function() {
wx.request({
url: 'http://localhost:9999/api/question/question/list',
method: 'POST',
success: function(data) {
console.log(data)
}
})
},
详情 本地设置 不校验合法域名 CORS 跨域设置
