小程序开发基础知识总结-最全
⼩程序开发基础知识总结-最全
⼩程序在⽆论在功能、⽂档及相关⽀持⽅⾯，都是优于前⾯⼏种账号类型，它提供了很多原⽣程序才有的接⼝，使得我们的⼩程序在很多⽅⾯突破H5页⾯应⽤的限制，更加接近原⽣程序的功能，因此⼩程序具有很⼤的前景想象⼒。它提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS，以及基于 Java 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以⽅便的聚焦于数据与逻辑上。
1、⼩程序的⽬录结构
⼩程序的⽬录结构如下所⽰。
其中项⽬级别的的⽂件包括 app.js、app.json、app.wxss 这三个。其中.js后缀的是脚本⽂件，.json后缀的⽂件是配置⽂件，.wxss后缀的是样式表⽂件。
页⾯级别可以包含很多个页⾯，如index，detail等页⾯，每个页⾯都包含.js，.json，.wxml，.wxss这些⽂件，其
中.wxml为页⾯视图⽂件，是⾃定义标签的HTML页⾯。
app.js是⼩程序的脚本代码。我们可以在这个⽂件中监听并处理⼩程序的⽣命周期函数、声明全局变量，可以调⽤框架提供的丰富的 API。
app.json 是对整个⼩程序的全局配置。我们可以在这个⽂件中配置⼩程序是由哪些页⾯组成，配置⼩程序的窗⼝背景⾊，配置导航条样式，配置默认标题。
app.wxss 是整个⼩程序的公共样式表。我们可以在页⾯组件的 class 属性上直接使⽤ app.wxss 中声明的样式规则。⼀个⼩程序主体部分由三个⽂件组成，必须放在项⽬的根⽬录。
⼩程序中的每⼀个页⾯的【路径+页⾯名】都需要写在 app.json 的 pages 中，且 pages 中的第⼀个页⾯是⼩程序的⾸页。
每⼀个⼩程序页⾯是由同路径下同名的四个不同后缀⽂件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的⽂件是脚本⽂件，.json后缀的⽂件是配置⽂件，.wxss后缀的是样式表⽂件，.wxml后缀的⽂件是页⾯结构⽂件。
index.json 是页⾯的配置⽂件：页⾯的配置⽂件是⾮必要的。当有页⾯的配置⽂件时，配置项在该页⾯会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页⾯配置⽂件，则在该页⾯直接使⽤app.json 中的默认配置。
春暖花开踏青的句子
逻辑层(App Service)
⼩程序开发框架的逻辑层是由Java编写。
逻辑层将数据进⾏处理后发送给视图层，同时接受视图层的事件反馈。在 Java 的基础上，我们做了⼀些修改，以⽅便地开发⼩程序。
•增加 App和 Page⽅法，进⾏程序和页⾯的注册。
•增加 getApp 和 getCurrentPages ⽅法，分别⽤来获取 App 实例和当前页⾯栈。
•提供丰富的API，如⽤户数据，扫⼀扫，⽀付等特有能⼒。
•每个页⾯有独⽴的作⽤域，并提供模块化能⼒。
•由于框架并⾮运⾏在浏览器中，所以 Java 在 web 中⼀些能⼒都⽆法使⽤，如 document，window 等。
•开发者写的所有代码最终将会打包成⼀份 Java，并在⼩程序启动的时候运⾏，直到⼩程序销毁。类似
ServiceWorker，所以逻辑层也称之为 App Service。
视图层
视图层
框架的视图层由 WXML 与 WXSS 编写，由组件来进⾏展⽰。
将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
婴儿奶粉品牌排名WXML(WeiXin Markup language)⽤于描述页⾯的结构。
WXSS(WeiXin Style Sheet)⽤于描述页⾯的样式。
组件(Component)是视图的基本组成单元。
基础组件
框架为开发者提供了⼀系列基础组件，开发者可以通过组合这些基础组件进⾏快速开发。
什么是组件：
•组件是视图层的基本组成单元。
•组件⾃带⼀些功能与风格的样式。
•⼀个组件通常包括开始标签和结束标签，属性⽤来修饰这个组件，内容在两个标签之内。
Content goes here ...
注意：所有组件与属性都是⼩写，以连字符-连接
API
框架提供丰富的原⽣API，可以⽅便的调起提供的能⼒，如获取⽤户信息，本地存储，⽀付功能等。
说明：
•wx.on 开头的 API 是监听某个事件发⽣的API接⼝，接受⼀个 CALLBACK 函数作为参数。当该事件触发时，会调⽤CALLBACK 函数。
•如未特殊约定，其他 API 接⼝都接受⼀个OBJECT作为参数。
•OBJECT中可以指定success, fail, complete来接收接⼝调⽤结果。
参数名类型必填说明
success Function否接⼝调⽤成功的回调函数
fail Function否接⼝调⽤失败的回调函数
completeFunction否接⼝调⽤结束的回调函数（调⽤成功、失败都会执⾏）
2、⼩程序接⼝功能列表
框架提供丰富的原⽣API，可以⽅便的调起提供的能⼒，如获取⽤户信息，本地存储，⽀付功能等。
1）⽹络 API 列表：
WebSocket 连接wx.onSocketOpen 监听 WebSocket 打开wx.onSocketError 监听 WebSocket 错误wx.sendSocketMessage 发送WebSocket 消息wx.onSocketMessage 接受 WebSocket 消息wx.closeSocket 关闭 WebSocket 连接wx.onSocketClose 监听 WebSocket 关闭
2）媒体 API 列表：
幼儿园门卫管理制度wx.chooseImage 从相册选择图⽚，或者拍照wx.previewImage 预览图⽚wx.startRecord 开始录⾳wx.stopRecord 结束录⾳wx.playVoice 播放语⾳wx.pauseVoice 暂停播放语⾳wx.stopVoice 结束播放语⾳
3）⽂件 API 列表：
wx.saveFile 保存⽂件wx.getSavedFileList 获取已保存的⽂件列表wx.getSavedFileInfo 获取已保存的⽂件信息
4）数据 API 列表：
wx.setStorageSync 设置本地数据缓存wx.getStorageInfo 获取本地缓存的相关信息wx.getStorageInfoSync 获取本地缓存的相关信息wx.removeStorage 删除本地缓存内容wx.removeStorageSync 删除本地缓存内容wx.clearStorage 清理本地数据缓存wx.clearStorageSync 清理本地数据缓存
5）位置 API 列表：
6）设备 API 列表：
7）界⾯ API 列表：
wx.showToast 显⽰提⽰框wx.showLoading 显⽰加载提⽰框wx.hideToast 隐藏提⽰框wx.hideLoading 隐藏提⽰框wx.showModal 显⽰模态弹窗wx.showActionSheet 显⽰菜单列表wx.setNavigationBarTitle 设置当前页⾯标题
wx.showNavigationBarLoading 显⽰导航条加载动画wx.hideNavigationBarLoading 隐藏导航条加载动画
wx.navigateTo 新窗⼝打开页⾯wx.redirectTo 原窗⼝打开页⾯wx.switchTab 切换到 tabbar 页⾯wx.nav
igateBack 退回上⼀个页⾯wx.createAnimation 动画wx.createContext 创建绘图上下⽂wx.drawCanvas 绘图wx.stopPullDownRefresh 停⽌下拉刷新动画
8）WXML节点信息 API 列表：
9）开放接⼝：
相机电子干燥箱wx.login 登录wx.getUserInfo 获取⽤户信息wx.chooseAddress 获取⽤户收货地址wx.requestPayment 发起⽀付wx.addCard 添加卡券wx.openCard 打开卡券
应用化学专业排名wx.addCard 添加卡券wx.openCard 打开卡券
3、相关处理代码
1）注册程序处理代码网上共青团.智慧团建登录
App({ onLaunch: function(options) { // Do something initial when launch. }, onShow: function(options) { // Do something when show. }, onHide: function() { // Do something when hide. }, : function(msg) { console.log(msg) }, globalData: 'I am global data' })
2）注册页⾯处理代码
//index.jsPage({ data: { text: "This is page data." }, : function(options) { // Do some initialize when page load. }, onReady: function() { // Do something when page ready. }, onShow: function() { // Do something when page show. }, onHide: function() { // Do something when page hide. }, onUnload: function() { // Do something when page close. }, onPullDownRefresh: function() { // Do something when pull down. }, onReachBottom: function() { // Do something when page reach bottom. }, onShareAppMessage: function () { // return custom share data when user share. }, onPageScroll: function() { // Do something when page scroll }, // Event handler. viewTap: function() { this.setData({ text: 'Set some data for updating view.' }) }, customData: { hi: 'MINA' } })
3）JS函数模块化
// common.jsfunction sayHello(name) { console.log(`Hello ${name} !`) }function sayGoodbye(name) {
console.log(`Goodbye ${name} !`) } ports.sayHello = sayHello exports.sayGoodbye = sayGoodbye
在需要使⽤这些模块的⽂件中，使⽤ require(path) 将公共代码引⼊
var common = require('common.js') Page({ helloMINA: function() { common.sayHello('MINA') }, goodbyeMINA: function() { common.sayGoodbye('MINA') } })
4）⽹络数据请求处理代码
//点击搜索按钮调⽤的函数 search:function(e){ var that = this; //数据加载完成之前，显⽰加载中提⽰框 wx.showToast({ title: '加载中。。。', icon: 'loading', duration: 10000 }); //发起请求，注意 wx.request发起的是 HTTPS 请求 wx.request({ url: url + "?city=" + that.data.inputValue + "&key=" + apiKey, data: {}, header: { 'content-type': 'application/json' }, success: function(res) { var data = res.data; //将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值
that.setData({ restation: sult, condition: false }); //数据加载成功后隐藏加载中弹框 wx.hideToast(); } }) }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。