《微信小程序》ppt课件

《《微信小程序》ppt课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、微信公众平台小程序PRESENTEDBYMaKaiCONTENTS总体介绍接入流程技术开发开发和运营规范总体介绍1是一种不需要下载安装即可使用的应用，它实现了应用触手可及，用户只需要扫一扫或者搜一搜就可以快速打开应用小程序是什么1如何使用小程序微信钱包微信支付完成页二维码收款页面支付附近的小程序列表LBS信息页相关小程序列表自定义菜单模板消息文章公众号发现栏主入口小程序模板消息安卓系统桌面图标小程序信息页系统二维码小程序码扫码顶部搜索框小程序主入口搜索框搜一搜搜索小程序消息卡片分享我的卡包卡券详情页卡券小程序之间跳转跳

2、转1行业现状100万+开发者：企业和个人2300个第三方平台58万个已上线数量1.7亿日使用用户数1企业政府媒体其他组织开放注册范围1个人小程序案例-中原银行1接入流程2接入流程21在微信公众平台注册小程序，完成注册后可以同步进行信息完善和开发。注册（快速注册）2填写小程序基本信息，包括名称、头像、介绍及服务范围等。小程序信息完善3完成小程序开发者绑定、开发信息配置后，开发者可下载开发者工具、参考开发文档进行小程序的开发和调试。开发小程序4完成小程序开发后，提交代码至微信团队审核，审核通过后即可发布。提交审核和发布技术

3、开发3开发理念3小程序开发≠H5开发DOM数据驱动系统架构ViewAppServiceCDNWebServerStorgeDataDataEventEventInWechatInitRequestPackageAJAXRequestJSONDataNetwork3系统架构PagePagePageWXMLWXSSView（视图层）AppService（逻辑层）ModelAPIJSBridgeDataEventDataEvent微信能力网络请求离线存储…Native（系统层）3获取小程序的AppId3登录https://m

4、p.weixin.qq.com，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的AppID了，注意不可直接使用服务号或订阅号的AppID。创建项目31、选择创建“项目”。2、填入AppID，项目名称，选择存储目录，点击“新建项目”就可以了。3、如果选择空文件夹，可以选择创建一个quickstart项目，会在开发目录里生成一个简单的demo。编写代码3app.json全局配置app.js脚本代码app.wxss公共样式表初始化三个最关键的文件，必不可少！编写代码3app.js小程序的脚本代码。我们可以在这个文

5、件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的API。App({onLaunch:function(){//调用API从本地缓存中获取数据varlogs=wx.getStorageSync('logs')

6、

7、[]logs.unshift(Date.now())wx.setStorageSync('logs',logs)},getUserInfo:function(cb){varthat=this;if(this.globalData.userInfo){typeofcb=="function"&&cb

8、(this.globalData.userInfo)}else{//调用登录接口，获取用户信息并复制给that.globalData.userInfo}},globalData:{userInfo:null}})编写代码3app.json对整个小程序的全局配置。小程序中的每一个页面的【路径+页面名】都需要写在app.json的pages中，且pages中的第一个页面是小程序的首页。注意该文件不可添加任何注释。{"pages":["pages/index/index","pages/logs/logs"],"window

9、":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"WeChat","navigationBarTextStyle":"black“}}编写代码3app.wxss整个小程序的公共样式表。我们可以在页面组件的class属性上直接使用app.wxss中声明的样式规则。.container{height:100%;display:flex;flex-direction:column;a

10、lign-items:center;justify-content:space-between;padding:200rpx0;box-sizing:border-box;}编写代码3每一个小程序页面是由同路径下同名的四个不同后缀文件的组成index.json配置文件（非必需）index.js脚本文件index.wxss样式表文件