宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

2.4:微信公众平台-小程序(重点)

微信通讯产品:腾讯公司(超过10亿用户)
BATJ(百度/阿里/腾讯/京东)
微信公众平台(订阅号/小程序/小游戏)
订阅号:个人媒体平台(文章/音频/视频)
微信小程序:中小企业和个人(轻量级app)

2.5:微信公众平台–小程序(重点)-注册帐户
(1)微信公众平台
https://mp.weixin.qq.com/
(2)立即注册
   订阅号   服务器   (*)小程序   企业微信

(3)邮箱(没有在微信平台使用订阅号小程序….）

(4)注册主体类型
-企业和机构
(1)上传企业基本信息加盖公章图片清晰
(2)主体类型不能修改
(3)微信支付/卡包/附近小程序-面向企业
-个人

2.6:微信公众平台-小程序(重点)-登录

https://mp.weixin.qq.com/
(1)邮箱/密码

(2)左侧菜单开发选项  点击。
(3)开发设置     点击
(4)appid:小程序密钥

(5)左侧菜单:版本管理
开发版本–>审核版本->线上版本

2.7:微信公众平台–小程序(重点)-下载开发者工具
(1)微信开发工具下载地址https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

(2)安装下一步
(3)用手机微信扫二维进入工具
(4)创建项目

 微信小程序-风君雪科技博客

2.8:微信公众平台-小程序(重点)-工具
云开发:开通云开发->打开云开发管理界面

编译:将所有代码重新编译执行最新结果

预览:将代码上传微信服务器,使用手机微信扫描看到程序结果

上传:将项目上传微信服务器[开发版本]
详情:项目详细
(1)调试基础库
注意事项:每一个小程序项目不能超过2MB

2.9:微信公众平台-小程序(重点)-目录结构

微信小程序-风君雪科技博客

2.10:微信公众平台-小程序(重点)-如何创建页面

exam01/
exam01.wxml     类似html
exam01.WXss     类似css
exam01.json      配置文件
exam01.js           类似js

 微信小程序-风君雪科技博客

2.11:微信公众平台–小程序(重点)-wxm|
小程序wxml微信xml
#严格匹配置开始结束标签
常见标签

view    相当于<div>       #块级元素
text     相当于<span>    #行内元素.
image 相当于<img src=”” />
form    相当于<form></form>p
…

常见错误：

 (!)expect end-tag `text`   缺少结束标签

(2)模拟器没有任何内容关闭网络防火墙
(3)输入中文不成功关 闭开发工具再启动

(1)文本标签
<text selectable=”true”> </text>
selectable=”true”
文本的内容可以复制

(2)图片
<image src=”%201.jpg” lazy-load=’true’></image>

lazy-load=’true’懒加载:等 待图片下载成功后再显示
图片内容
图片默认320*240图片

2.12:微信公众平台–小程序(重点)-wxss
wxss是一套用于小程序的样式语言,功能描述组件
(1)单位:rpx(responsive pixel)响应式像素,可以根据屏幕
宽度自适应调用图片文字容器大小

图片默认320* 240图片

2.12:微信公众平台–小程序(重点)-wxss
WXSS是一套用于小程序的样式语言,功能描述组件
(1)单位:rpx(responsive pixel)响应式像素,可以根据屏幕宽度自适应调用图片文字容器大小

(2)引入外部样式文件@import “./base.wxss”

2.13:微信公众平台-小程序(重点)-rpx
问题:移动端开发你使用哪个像素

-前端设计师:设计稿图片    物理像素
-前端开发:css                    逻辑像素

示例:iphone6(2)/iphone plus(3)
逻辑像素* dpr=物理像素
iphon6    375px* 2= 750
iphon6plus   ?
小程序解决方案: rpx响应式像素

(iphone6)     750rpx逻辑像素=== 750物理像素

2.14:微信公众平台-小程序(重点)-引入其它样式文件

#将项目公众样式内容统一保存在 一个文件中

style/common.WXSS
exam01.WXSS

@import “../style/common/wxss”
#引入其它样式文件一定用相对路径

#小程序开发文档
2.15:微信公众平台-小程序(重点)-第三方组件库(样式库)
-小程序开发文档

https://developers.weixin.qq.com/miniprogram/dev/framework/

 Vannt   Weapp     -有赞团队开发样式(项目)

https://youzan.github.io/vant-weapp/#/    小程序
-WeUI
-iview Weapp

2.16:微信公众平台-小程序(重点)-配置文件

project.config.json   项目配置文件
app.json                  项目全局配置文件
exam01.json           组件配置文件

–app.json         全局配置文件
#如果一个选项添加app.json所有组件立即生效

“pages”:[]    组件列表
[
“pages/exam01/exam01″，#默认 显示第一个组件
” pages/exam02/exam02″
]

“window”:}全局窗口配置
“navigationBarBackgroundColor”‘: “#F00”,      导航条背景
“navigationBarTitleText'”: “学子商城”，           导航条文本
“navigationBar TextStyle'”‘: “black”                 导航条文本颜色(只能选黑白）

“tabbar”:{}  底部导航栏

“tabBar”: {
    “list”: [   按钮列表
　　{         一个按钮
      “pagePath”: “pagePath”, 　点击按钮跳转组件
      “text”: “text”,　　　　　　　按钮文本
      “iconPath”: “iconPath”,          按钮默认图标
      “selectedIconPath”: “selectedIconPath” 　　　　按钮选中图标
    }]
  },

#注意事项:图标不能使用网络路径只有本地路径
#注意事项:按钮最少二个

2:今天的目标

3.1:微信公众平台–小程序–js/事件
-小程序中js与网页程序中js有区别
(1)ECMA基本类型:string;number;boolean;undefined;null
(2)ECMA对象:Date;Math;RegExp;Array;Function….
(3)DOM/BOM不能使用

(4)小程序顶级对象 wx 相当于网页js中window

#通过小程序文档[API]查看所有组件

-js特殊文件
(1) 全局js         app.js     全局共享数据
(2) 当前组件js  base.js   当前组件使用
Page({})当 前组件对象包括[事件/方法/data]
如何显示data中数据    {{msg}}

3.2:微信公众平台–小程序-js/事件数据显示控制
(1)循环

<view wx:for=”{{数组名称}}” wx:key=”index”>

{{item}}     当前对象
{{index}}   当前元素下标

</view>

#wx:for=”{循环数组名称}”
#wx:key=”index”数组元素下标(排序规则) 快速排序

(2)if
<view wx:if=”{{condition}}”>xxx</view>
condition:表达式true false  

true     当前元素正常显示
false    当前元素删除

(3)if else
<view wx:if=”{{condition}}”> </view>
<view wx:elif=”{{condition}}”></view>

<view wx:else></view>

(4)hidden
<view hidden=”{{condition}}”>内容</view>

true    隐藏      false  显示

问题:什么时候使用if什么时候使用hidden
(1)如果此元素需要频繁切换使用hidden
(2)如果此元素在运行中不大可能改变则wx:if 较好

3.3:微信公众平台–小程序-js/事件-事件

pc端项目屏幕宽度 > 970px操作:鼠标键盘
移动端项目屏幕宽度<970px 操作:手指

移动端项目:
-touchstart 当手指碰屏幕时发生事件不管几个手指
-touchmove当手指在屏幕上滑动边续触发

-touchend 当手指离开屏幕时触发
zepto.js -相当于移动端jquery
tap 触碰一次
longtap 长按一次超过350ms
swipe  滑动
swipeLeft  左滑

3.4:微信公众平台-小程序–js/事件事件
小程序事件分为二种
(1)冒泡事件:当一一个组件.上事件被触发后，该事件向父元素传递

(2)非冒泡事件:当一个组件.上事件被触发后，不向父元素传递
小程序绑定事件方式

-支持事件冒泡
<view bind事件名=”事件处理函数”></view>
-不支持事件冒泡
<view catch事件名=”事件处理函数”></view>

3.x:微信公众平台-小程序-生命周期（指组件的生命周期）

组件生命周期:一个组件从创建开始到使用最后销毁过程 

onLoad           :组件创建成功后触发一次

　　　　　　(1)发送ajax请求
　　　　　　(2)获取传递参数onLoad(options)

(4)onReady       :组件渲染成功后触发一次
onShow     　　:显示组件多次
onHide 　　　  :隐藏组件多次

onUnload          :销毁 

　

3.6:微信公众平台–小程序-特殊事件
(1) onPullDownRefresh      用户下拉操作[刷新操作]

(2) onReachBottom            用户上拉触顶[下一页]

#默认小程序禁止用户下拉操作
#修改默认行为
-全局修改: app.json
window:{
“enablePullDownRefresh”:false #禁 止用户下拉操作
}

-当前组件修改: base.json
enablePullDownRefresh”: true

4.1:微信公众平台-小程序–云开发 三个基础内容

-云数据库:数据增加/删除/修改/查询….
-云存储:上传文件/下载文件/分享文件/管理文件

-云函数:获取appid/调用高级权限操作

4.2:微信公众平台–小程序-开通云开发
小程序开发工具–>”云开发”开通
环境名称:[……..]英文数字
环境id:[]自动生成复制下来

#免费环境
-5GB 云数据库
-2GB云存储
-CDN流程5GB/月

4.3:微信公众平台–小程序–云数据库(mongodb nosq|数据库)
云开发提供-一个JSON数据库提供2GB免费空间

关系型数据库 文档型数据库
数据库database 数据库database
表table 集合collection
行row 记录record/doc
列column 字段field

#关系型数据库(mysql):适合复杂数据关系企业内 部软件系统
#文档型数据库(mongodb):数据关系简单频繁查询,更新app

mongodb nosq|数据库：

数据类型  
string字符串 Number数字
Object对象 Array数组
Bool布尔 GeoPoint地理位置点
Date时间(客户端) NULL

4.4:微信公众平台–小程序–云数据库操作

(1)控制台：
(2)云函数
(3)小程序操作

4.5:微信公众平台–小程序操作云数据库
(1)通过控制台:创建集合web1903
(2)初始化默认云数据库
const db = wx.cloud.database();

(3)向集合中添加新记录
db.collection(“集合名称”).add(
{
data:{name:”文华”,age:60},
success:function(res){},
fail:function(err){}
}

)

add()向集合中添加数据
data:{}数据
success添加成功回调函数
fail 添加失败回调函数

示例：创建新组件pages/db/db

常见错误:
(1) -502005 database collection not exists
#集合不存在   web1903

原因1:拼写错误db.collection(“拼写错误”)
原因2:没有集合

(2)如果创建二个环境
const db = wx.cloud.database({

env:”环境id”

});

env：环境

(3) errCode: -501005 invalid env
原因:env:”环境id错误”

示例：

1:控制台创建集合web1903user
添加pages/db/db/ button
完成向web1903user集合添加一条记录

4.6:微信公众平台–小程序操作云数据库-更新
db.collection(“集合名称”).doc(“当前记录id'”).update({
data:{
   属性名:值

}
}).then(res=>{
console.log(res)；
}).catch(err=>{
console.log(err);
})

doc() #当前记录id
update#更新数据

4.7:微信公众平台–小程序操作云数据库–删除
db.collection(“集合名称”).doc(记录id)
.remove().then(res=>{).catch(err=>{})
#注意事项:通过小程序一次只能删除–条数据

示例：

(1)创建集合i web1903emp[员工集合]控制面板
(2)通过小程序
2.1:向集合添加员工信息
{no:1,name:”tom”,sal:3000}
{no:2,name:”jerry”,sal:7000}
{no:3,name:”kaka”,sal:6000}
2.2:更新第一条记录sal 3500
2.3:删除最后一条记录

2.2:小程序云开发-云数据库–查询
(1)查询所有数据
db.collection(“集合名称”).get().then(res=>{}).catch(err=>{})
get:获取查询
then:查询成功后获取返回内容
res     查询结果
catch: 查询失败
err     失败原因
(2)查询指定数据

dbcollection(“集合名称”).where({name:”erry”})
.get().then(res=>/{).catch(err=>{})
where查询条件
get获取查询
then查询成功后获取返回内容
res查询结果

示例：实现web1903emp集合查询与删除操作
1:当组件创建成功后查询web1903emp集合中所有记录
2:将记录显示网页模板
data:{list:[]}
在小程序中将数据保存data有一个专用方法
this.setData({
属性名:新值

});

3:在网页模块每一条记录加一个按钮<button></button>
4:为button绑定点击事件/删除指定记录

2.2:小程序云开发-云函数
云函数:特殊函数将其保存小程序云上(腾讯云)
云函数从功能很多优点:权限高完成复杂操作
演示三个示例
(1)求和云函数sum()

(2)获取当前登录用户openid
(3)批量删除云数据库中数据(ES7语法)

2.3:小程序云开发-云函数-求和函数
#注意事项:开发云函数要求本地下载安装nodejsv8.0以上

(1)开发工具coludfunctions
鼠标右键->新建云函数
(2)云函数名称:sum
(3)打开index.js

(4)添加云函数代码
exports.main = async(event,context)=>{

return {
     sum:event.i + event.j
   }

}

exports导出       event事件对象(获取用户参数)
main主函数       context 上下文对象(获取用户信息).
async导步(ES7语法)

(5)上传部署

创建并部署,云端安装依据

(6)测试云函数
(7)在小程序中调用开发云函数
wx.cloud.callFunction({   //调用云函数

name:”云函数名”,　　　　//云函数名
data:{i:1j:2}　　　　　　//参数

}).then(res=>{　　　　//调用成功
console.log(res);

}）

#注意事项:如果你旧版本小程序工具没有server-sdk报错
#右击countFunctions 在终端中打开
#npm install –save wx-server-sdk@latest

常见错误
(1) Error: errCode: -404011 cloud function execution error

原因:
-调用云函数不存在
-调用去函数没有上传
-云函数名子拼写错误

2.4:小程序云开发云函数-login登录（此函数自带）
调用此云函数返回很多登录用户信息

openid
头像
性别
….

2.5:小程序云开发-云函数批量删除    batchDelete03

云数据库web1903emp同名记录name:”kaka”
云函数目的:删除name:”kaka”
async:异步ES7异步执行函数
await:等待如果执行耗时任务启动关键字等待任务执行完毕

exports.main = async(event,context)=>{
try{

return await db.collection(“web1903emp”).where({
　　name:”kaka’
　　}).remove();
　　}catch(e){
　　　　console.log(e);
　　}
}

2.6:小程序云开发-云存储-5GB
(1)用户.上传文件流程
-用户选择图片或拍照
-小程序上传所选中图片
-云存储返回图片filelD //在云存储图片地址

(2)开发流程.
-选择图片.
wx.chooselmage({

count:数值     //一次选择几张图片默认9
sizeType:[“original”,”compressed”]      //选中图片类型(原图/压缩)
sourceType:[“album”,”camera”]     //图片来源(相册/相机)

success:function(res){ //选中图片成功回调

res.tempFilePaths //选中图片地址

}

}）；

-上传图片
wx.cloud.uploadFile();

cloudPath:上传成功后新文件名
filePath:选中图片名

success：res=>{  上传成功

console.log(res.filelD);
上传成功后返回指定文件路径
}

示例1:文件上传与显示功能
-云数据库创建集合myphoto
目标:保存上传文件fileID
-创建组件pages/myphoto/myphoto
-添加按钮”上传图片”
#将上传文件filelD保存myphoto中
-创建按钮”显示图片”

-获取集合中myphoto创建循环遍历filelD
<image src=”{{item.filelD}}”></image>

2.2:小程序-学子商城项目-下载安装vant第三方库
有赞团为vant网站
https://youzan.github.io/vant-weapp

(1)创建项目描述文件package.json
右击miniprogram目录->选中在终端中打开菜单项
输入命令npm init    回车   回车…
#npm init功能生成项目描述文件package.json
#执行成功后生成package.json 文件

(2)通过npm安装vant第三方组件库
右击miniprograme 目录->选中在终端中打开
输入命令npm i vant-weapp -S –production   回车

#安装成功看到文件夹node_ modules
#右击miniprograme在硬盘打开
(3)点击工具菜单–>构建npm

#将node_ _modues 内容复制一份miniprogram_ npm
#常见错误module .. not defined
解决:点击工具菜单->构建npm

(4)点击工具菜单->详情
[*] 使用npm模块

(5)在组件中配置要使用哪个第三方组件
“usingComponents”: {
“van-button”: “vant-weapp/button/index”
}

#注意:组件路径修改与miniprogram_ npm下目录结构相同

(6)在当前组件中使用button按钮

<van-button type=”default”>默认按钮</van-button>

2.3:小程序-学子商城项目-娱乐
(1)电影列表从”豆瓣网”下载最新电影列表
豆瓣网热映电影列表

http://api.douban.com/v2/movie/in_ theaters
第一个部分:接口地址

第二个部分:apikey=密钥(别人开发者密钥)
第三个部分:start第几条记录开始

          　　count本次查询几条记录

(2)如何获取”豆瓣网”热映电影列表发送ajax请求

2.1:小程序有二种请求数据方式

 

小程序端

 云函数
发送方法 wx.request({}) 下载第三方ajax库(request)
协议支持 只支持https 根据第三方库决定
是否备案 经过ICP备案 可以不备案
域名个数 20个 无限制
     

2.2:开发云函数获取”豆瓣”电影列表
-创建云函数movielist3
-点击movielist3鼠标右键~>打开终端
#注意下面命令有顺序
npm install –save request
npm install –save request-promise
#此次请求使用ajax库request-promise
#上面库是request-promise依赖库

2.3:开发云函数
(1)引入request-promise 库
var rp = require(“request-promise”);
(2)导出创建main函数

exports.main = async (event,context)=>{}
event:事件对象   保存请求参数
context:上下文对象    用户openid appid..

(3)创建url请求地址
var url = ‘http://api.. &start=${event.start}
&count=${event.count}’ ;
(4)rp(urI)     返回查询结果

2.4:学子商城–娱乐首页

微信小程序-风君雪科技博客

  

首页功能:
(1)打开首页组件时查看第-页电影
(2)向上滑动屏幕查看下一页
(3)点击详细按钮跳转电影详细组件显示内容
(4)电影图片/电影名称/电影导演/电影主角…. .

2.5:学子商城-娱乐首页-设计首页布局
2.6:学子商城-娱乐首页-添加样式
2.7:学子商城-娱乐首页-js实现以上功能

(1)功能一:打开首页组件时查看第一页电影
-onLoad
-loadMore(){}加载更多在此函数发送请

求获取第一页数据
–调用云函数movielist3
–调用云函数时传参数start:10 count:10
–保存data   list 

2:今天的目标
2.1:学子商城–娱乐首页完成
(1)打开首页组件时查看第一页电影     OK
(2)向.上滑动屏幕查看下一页
向上滑动onReachBottom上拉触底
常见错误:

(1) -404011 cloud function execution error
原因:云函数调用失败
a云函数上传失败
b依赖库request下载
c切换云环境

解决:
a,b检查你本地云函数拼写正确,重新下载request
打开云管理面板删除原先云函数再上传
C   app.js配置云环境使用哪个
-点击详细按钮跳转电影详细组件显示内容

目标:从home组件(关闭并且跳转) comment评论组件
wx.redirectTo({
　　　　url:”/pages/comment/comment”
})
目标:从home组件(保留并且跳转)comment评论组件
wx.navigateTo({
url:”/pages/comment/comment”
})

2.2:学子商城-娱乐详情完成

功能列表:
(1)电影图片
(2)评论功能
(2.1–评论内容[vant]
(2.2)–打分  [vant]
(2.3)–上传图片[上传多张图片]

2.3:学子商城–娱乐详情完成-准备
(1)创建组件comment
(2)创建云函数getDetail3获取某部电影详细信息
(3)下载安装两个依据ajax!!!
npm install –save request
#依赖库
npm install –save request-promise
#请求库
(4)检查url豆瓣电影详情url

http://api.douban.com/v2/movie/subject/电影id?apikey=0df993c66c0c636e29ecbb5344252a4a

(5)上传部署云函数
(6)云测试

2.4:学子商城-娱乐详情完成-开发(第三方组件库vant)
(1)输入框
(2)打分
(3)上传按钮

2.5:学子商城-娱乐详情完成-输入框
(1)查看手机
(2)打开配置文件comment.json

#删除多余目录
{
“usingComponents”: {
“van-field”: “vant-weapp/field/index”
}
}
(3)在模板中使用组件comment.wxml

<van- field
value=”{{ value }}”
placeholder=”请输入用户名”
border=”{{ false }}”
bind:change=”onChange”
/>

(3)在模板中使用组件comment.js

Page({
data: {
value: “
onEhange(event) {
// event.detail为当前输入的值
console.log(event.detail);

}
});

2.6:学子商城–娱乐详情完成.设计外观

微信小程序-风君雪科技博客

2.7:学子商城–娱乐详情完成
功能1:当组件加载成功显示电影详细信息
1.1:data添加属性movieid:0 保存电影id
1.2:data添加属性detail:{}
保存电影信息
1.3:添加方法loadMore
组件创建成功调用
1.4:loadMore调用云函数getDetail4 参数id:电影

将云函数返回保存detail
1.5:在模板中显示detail对象中数据

示例:loadMore
示例:上传多张图片
2.1:上传图片
异步9先完成
2.2:将上传图片fileld 保存云数据库异步1等待

2.今天的目标
2.1:学子商城评论(重点/难点)
常见错误
(1)JSON0位置错误
原因:服务器返回数据不正确不是严格JSON字符串
解决:(1)网络太差中间丢数据现象
(2)云函数写错误

“rating”: {“max”: 10, ” average”: 8.7 正确
appid: event                             云函数错误

2.2:学子商城评论-上传图片[选择图片](重点/难点)
功能:一.次请用户选择9张图片
用户将图片保存data:{images:[]}
在按钮下预览选中9张图片

wx.chooselmage({})
count:9
sizeType:[]
sourceType:[]
success:(res=>{})

2.3:学子商城评论-上传图片[上传图片](重点/难点)
-任务1:将data中选中图片上传云存储中
-任务2:将图片fileID与用户评论评分保存云数据库
问题:完成任务1与任务2遇到异步操作
[异步操作:任务1与任务2交替无序执行]

解决:ES6 Promise

(1)创建数组中元素Promise对象,每对象完成上传图片操作
Promise(reslove,reject)=>{
上传图片(新文件名,上传，将上传成功后fileID保存数组)
reslove();
}

(2)等待数组中所有Promise对象执行完毕
#等待list数组中所有Promise对象执行完毕后，执行回调函数
Promise.all(list).then(res=>{
一次性将filelD保存云数据库集中
})

(3)将_上传所有图片filelD 一次保存云存储中

2.4:学子商城-商城地址–地理定位(腾讯地图)
htmI5新特性有- – 个对象geolocation 通过浏览器js程序
获取当前用户位置信息
位置信息(经度/纬度/海拨/速度)…用于实现LBS
(location Base Service)基于位置服务

饿了么,滴滴打车…

手机浏览器定位
(1)智能手机GPS芯片与网络定位精度在米范围
(2)PC定位IP地址解析

htmI5中提供–个
geolocation
widow.navigator.geolocation({
getCurrentPostion:fn
});

2.5:学子商城-商城地址–小程序(腾讯地图)
<map></map>
longitude  中心位置经度位置
latitude   中心位置纬度位置

scale缩放级别(3~20)   16
markes    标记点
polyline   路线(其它经度和纬度)
show-location显示位置
style=” 100%;height:600rpx”

#如何获取指定位置经度纬度
#http://api.map.baidu.com/lbsapi/getpoint/
#116.300901,39.916085

#创建组件mymap我的地图
#注意事项:在手机定位非常准确

2.6:学子商城-个人中心/我的电影(我喜欢电影)
功能1:添加自己喜欢电影[电影描述文字/电影图片]
a:创建表单文字，上传图片
b:将图片.上传云存储并且图片filelD保存云数据库
c:文件添加云数据库
功能2:将添加成功后电影分页显示[左侧图片/文字]
a:查询云数据库喜欢电影信息分页

2.7:学子商城-个人中心/我的电影(我喜欢电影)
功能
*(1)在云数据库中创建集合mymovie [在云控制面板中]
*(2)创建组件pages/mymovie/mymovie
*(3)将home;mymap;mymovie 添加tabbar
(4)在组件mymovie(输入框/.上传图片按钮/添加按钮)

　　4.1:mymovie.json引入二个组件输入框/按钮
　　4.2:添加输入框在模板中
　　4.3:添加二个按钮[上传图片提交]在模板中.
　　4.4:添加图片显示view

2:今天的目标
2.0:检查
注册订阅号帐户(新邮箱不能使用小程序注册时邮箱)
检查软件安装

phonegap desktop
夜神或蓝碟       https://www.yeshen.com

2.1:完成我喜欢的电影
2.2:混编phonegap (了解)
#安装混编软件环境-定关闭防火墙
混编一种新技术:将web项目直接打包成功手机原生app安装包

原生:android java
原生:苹果    object C
h5   项目
微信小程序
支付宝小程序

2.3:混编phonegap (了解)
国外:phonegap混编平台
国内: uniapp     https://uniapp.dcloud.io/
提供二个方案
(1)一个程序打包成多种平台app
(2)支持手机底层硬件开发(课程内容)

2.4:混编phonegap (了解)–创建开发环境
(1)4个程序支持    phonegap服务器/软件模板

　　　　　　　　机模拟器/phonegap app

微信小程序-风君雪科技博客

2.5:混编phonegap (了解)–手机硬件
-device  设备
device.platform   获取手机操作系统I0S Android
device.uuid      获取手机硬件编码48
device.version   获取手机版本

-notification提示功能（手机）
navigator.notification.alert(“)提示信息
navigator.notification.confirm(msg,fn)确认消息
navigator.notification.beep(3)蜂鸣器
navgator.notification.vibrate( 1000) 震动1s

-camera   相机
navigator.camera.getPicture(fn1,fn2,{参数});
fn1拍照成功
fn2拍照失败
{quality:50}拍照延迟时间

-capture   录音
navigator.device.capture.captureAudio(fn1,fn2,参数);
fn1:录音成功回调函数
fn2:录音失败回调函数
{limit:3}录音几次

-accelerometer  加速度传感器
(1)获取用户当前位置信息
getCurrentAcceleration(fn1,fn2);
fn1:获取位置成功返回对象xyZ
fn2:获取位置失败
(2)创建监听用于监听用户位置变化

var变量= watchAcceleration(fn1,fn2,参数);
fn1  获取位置成功返回对象xyZ
fn2  获取位置失败
{frequency:1000} 1s监听一次
(3)取消监听
clearWatch(变量)

-补充环境启动过程
(1)启动phonegap服务器
(2)启动手机模拟器(蓝碟/夜神)
(3)点击模拟器phonegap app连接服务器
(4)template/www/index.html

2.6:微信公众平台–订阅号-聊天机器人

任务一:复制微信订阅号中测试帐appid(订阅号钥匙)

任务二:申请合法域名并且绑定4000端口.上weixin_ dy.zip

解决方案:内网穿透工具,此工具临时生合法域名并且与4000程序绑定一起  

使用方法: ngroke.exe协议名端口
示例:  .
grok http 4000   回车

任务三:开发聊天机器人app.js

(1)加载二个模块express/wechat (聊天模块)
(2)创建配置对象
config = {appid:”复制”,   //订阅号钥匙
token=”weixin”}        //暗号

server.post(‘ ‘/”,wechat(config,(req,res)=>{
req.weixin.Content   //手机用户发送你信息
res.reply(回复);   //回复.
}))
(3)node app.js

任务四:配置去微信公众平台测试帐户里
接口配置:
ur[https://d03b5142.ngrok.io]
token[weixin]
js接口安全域名

开发者工具-公众平台测试账号