微信小程序开发思路

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序开发思路相关的知识,希望对你有一定的参考价值。

小程序还没有完全开放,不能真实体验,但通过文档和开发工具,可以了解到他的开发思路


下面就介绍下小程序的开发方式,希望能帮助有兴趣的朋友对整体思路有个快速了解


整体结构

默认示例项目的目录结构

从后缀名上可以看到,一共有4种类型:


js 逻辑代码
wxml 视图文件
wxss 样式文件
json 配置信息
/app.js 中可以定义小程序在启动时做哪些业务逻辑、全局函数、全局数据……

App({  
  onLaunch: function () {  
    ...      
  },  
  getUserInfo:function(cb){  
    ...  
  },  
  globalData:{  
    userInfo:null  
  }  
})  

 

/app.json 中进行小程序全局性的配置,例如 底部导航有哪些标签、共有哪些页面、头部title、背景色……

{  
  "pages":[  
    "pages/index/index", ...  
  
  
  ],  
  "window":{  
    "navigationBarTitleText": "WeChat", ...  
  },  
  "tabBar": {  
    "list": [{  
      "pagePath": "pages/index/index",  
      "text": "首页"  
    }, {  
      "pagePath": "pages/logs/logs",  
      "text": "日志"  
    }]  
  }  
}  

/app.wxss 定义css样式



/pages 目录下是我们自定义的各个页面,一个页面是一个目录,包含4个文件:此页面的业务逻辑、视图、样式、配置


/app.json 中定义页面时使用没有后缀名

{  
  "pages":[  
    "pages/index/index",  
    "pages/logs/logs"  
  ], ...  
}  

这是一个规则,页面的4个文件的名称必须一致,需要用哪个类型的文件时,小程序会自动查找



整体结构就包括:


1.基础代码


app.js 定义小程序 启动、隐藏 等生命周期中做什么处理、全局的函数、数据


app.json 中配置底部导航的标签、都有哪些页面 等全局信息


app.wxss 中定义好小程序的基本样式


2.页面详细代码


每添加一个页面时,就在 /pages 目录下新建一个页面子目录,其中编写页面代码


wxml 中定义页面的布局结构、都有哪些组件(例如 图片、表单)、绑定数据、绑定事件处理函数


js 中定义这个页面所需要的数据、各个生命周期(例如 页面加载、卸载)中的处理逻辑、事件处理函数


json 中定义此页面的个性配置


wxss 中定义此页面的个性样式


逻辑层
响应式数据绑定
页面中的数据变化不需要我们手动更新,被绑定的数据发生变化时,页面会自动更新
例如

// 页面的视图代码  
  
  
<view> Hello {{name}}! </view>  
<button bindtap="changeName"> Click me! </button>  

其中绑定了name的数据,还定义了一个按钮,点击后会触发 changeName 方法



// 页面的逻辑代码

Page({  
  data: {  
    name: ‘ABC‘  
  },  
  changeName: function(e) {  
    this.setData({  
      name: ‘123‘  
    })  
  }  
})  

 

开始时页面会显示 ‘Hello ABC!’
点击按钮后触发 changeName 方法,其中修改了 name 的值为 ‘123’,页面便会更新为 ‘Hello 123!’

 


API
提供的API很丰富,例如:文件的上传下载、WebSocket、录音、拍照、录视频、本地数据存储、GPS、重力感应、罗盘、支付 ……


模块化
支持模块化的开发,可以将一些公共代码抽离成为一个单独的js文件,作为一个模块,通过 module.exports 和 require 对模块进行暴露和引用
示例
定义模块 

 

//common.js  
  
  
function sayHello(name) {  
  console.log(‘Hello ‘ + name + ‘!‘)  
}  
module.exports.sayHello = sayHello  

调用模块

var common = require(‘common.js‘)  
Page({  
  hello: function() {  
    common.sayHello(‘MINA‘)  
  }  
})  

 

视图层
组件
视图由一个个的组件构成,例如 按钮、输入框、进度条、文本、图片、视频、对话框 ……

<view>  
  <button>按钮</button>  
  <checkbox-group>  
    <checkbox value="" checked="true"/>北京  
    <checkbox value="" checked=""/>上海  
  </checkbox-group>  
  <loading>加载中...</loading>  
</view>  

逻辑处理

1. 循环
初始数据

Page({  
  data: {  
    items: [{  
      message: ‘foo‘,  
    }, {  
      message: ‘bar‘  
    }]  
  }  
})  

循环显示

<view wx:for="{{items}}">  
  {{index}}: {{item.message}}  
</view>  

2.条件判断

用 wx:if="{{condition}}" 来判断是否需要渲染该代码块,例如

<view wx:if="{{length > 5}}"> 1 </view>  
<view wx:elif="{{length > 2}}"> 2 </view>  
<view wx:else> 3 </view>  

事件

组件上绑定事件

<view bindtap="bindViewTap">组件</view>  

js中定义事件处理函数

Page({  
  bindViewTap:function(event){  
    ...  
  }  
})  

模板

<!-- 定义2个模板 -->  
<template name="odd">  
  <view> odd </view>  
</template>  
<template name="even">  
  <view> even </view>  
</template>  
  
  
<block wx:for="{{[1, 2, 3, 4, 5]}}">  
    <!-- 根据条件动态选择模板 -->  
    <template is="{{item % 2 == 0 ? ‘even‘ : ‘odd‘}}"/>  
</block>  

 

小结
小程序的整理结构很简洁,逻辑层是基础的JS+API,视图层需要我们好好熟悉一下各个组件及其属性








































































以上是关于微信小程序开发思路的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序开发之--"template模板“的应用

微信小程序开发思路

小程序开发遇到问题如何联系微信官方

微信小程序开发总结(附源代码)

微信小程序开发怎么实现尖嘴指示框?

微信小程序开发视频+项目实战