微信小程序16839.pptx

,微信公众平台 小程序,PRESENTED BY MaKai,CONTENTS,总体介绍,接入流程,技术开发,开发和运营规范,总体介绍,1,是一种不需要下载安装即可使用的应用，它实现了应用触手可及，用户只需要扫一扫或者搜一搜就可以快速打开应用,小程序是什么,1,如何使用小程序,1,行业现状,100万+,开发者： 企业和个人,2300个,第三方平台,58万个,已上线数量,1.7亿,日使用用户数,1,开放注册范围,1,小程序案例-中原银行,1,接入流程,2,接入流程,2,技术开发,3,开发理念,3,小程序开发 H5开发,DOM,数据驱动,系统架构,3,系统架构,3,获取小程序的AppId,3,登录 ，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的 AppID 了，注意不可直接使用服务号或订阅号的 AppID 。,创建项目,3,1、选择创建“项目”。 2、填入 AppID ，项目名称，选择存储目录，点击“新建项目”就可以了。 3、如果选择空文件夹，可以选择创建一个 quick start 项目，会在开发目录里生成一个简单的 demo。,编写代码,3,app.json 全局配置,app.js 脚本代码,app.wxss 公共样式表,初始化三个最关键的文件，必不可少！,编写代码,3,app.js 小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的API。,App( onLaunch: function () /调用API从本地缓存中获取数据 var logs = wx.getStorageSync(logs) | logs.unshift(Date.now() wx.setStorageSync(logs, logs) , getUserInfo:function(cb) var that = this; if(this.globalData.userInfo) typeof cb = “function“ & cb(this.globalData.userInfo) else /调用登录接口，获取用户信息并复制给that.globalData.userInfo , globalData: userInfo:null ),编写代码,3,app.json 对整个小程序的全局配置。小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中，且 pages 中的第一个页面是小程序的首页。注意该文件不可添加任何注释。, “pages“: “pages/index/index“, “pages/logs/logs“ , “window“: “backgroundTextStyle“:“light“, “navigationBarBackgroundColor“: “#fff“, “navigationBarTitleText“: “WeChat“, “navigationBarTextStyle“:“black“ ,编写代码,3,app.wxss 整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。,.container height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; ,编写代码,3,每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,index.json 配置文件 （非必需）,index.js 脚本文件,index.wxss 样式表文件 （非必需）,index.wxml 页面结构文件,数据定义和赋值,Page( data: iInterbankPriceList: , turnPageBeginPos: 1, turnPageShowNum: 3, tips: , method: getmore , changeData: function() this.setData( iInterbankPriceList: , turnPageBeginPos: this.data.turnPageBeginPos + this.data.turnPageShowNum, tips: 加载失败，请点击重试, method: getmore ); ),3,事件绑定 & 参数传递,3, interbankPrice.branchName ,queryIbProductDetail: function(e) var id = e.currentTarget.id; var eData = e.currentTarget.dataset; wx.navigateTo( url: /queryIbProductDetail/queryIbProductDetail?id= + id + &productOrg= + eDductOrg + &branchName= + eData.branchName + &productType= + eDductType ) ,页面跳转,3,wx.navigateTo( url: /queryIbProductDetail/queryIbProductDetail?id= + id + &productOrg= + eDductOrg + &branchName= + eData.branchName + &productType= + eDductType ),wx.redirectTo( url: /queryIbProductDetail/queryIbProductDetail?id= + id + &productOrg= + eDductOrg + &branchName= + eData.branchName + &productType= + eDductType ),wx.navigateBack( delta: 1 ),页面跳转,3,navigateTo,navigateTo,navigateTo,redirectTo,for循环,3, manager.custManagerName ,ajax,3,wx.request( method: POST, url: util.getUrl(), data: serviceId: “wei0004“, productOrg: ductOrg, turnPageBeginPos: that.data.turnPageBeginPos, turnPageShowNum: that.data.turnPageShowNum , header: content-type: application/json , success: function (res) , fail: function () );,开发者工具,3,手机预览,3,开发和运营规范,4,7条底线,4,法律法规底线 社会质疑制度底线 国家利益底线 公民合法权益底线 社会公共秩序底线 道德风尚底线 信息真实性底线,9不准,4,反对宪法所确定的基本原则的 危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的