微信小程序开发思路与方法是什么？
现在几乎每一个人都会经常的使用微信，微信小程序是微信最近推出了的新功能，很多微信小程序功能给我们带来了很多的便捷，最近很多微信用户问我微信小程序开发思路与方法是什么?下面小编就带你了解一下微信小程序开发思路与方法是什么?
整体结构
默认示例项目的目录结构
从后缀名上可以看到，一共有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 中定义此页面的个*样式
逻辑层
响应式数据绑定
页面中的数据变化不需要我们手动更新，被绑定的数据发生变化时，页面会自动更新
例如
// 页面的视图代码
Hello {{name}}!
Click me!
其中绑定了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')
}
})
视图层
组件
视图由一个个的组件构成，例如 按钮、输入框、进度条、文本、图片、视频、对话框 ……
按钮
北京
上海
加载中...
逻辑处理
1. 循环
初始数据
Page({
data: {
items: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
循环显示
{{index}}: {{item.message}}
2.条件判断
用 wx:if="{{condition}}" 来判断是否需要渲染该代码块，例如
事件
组件上绑定事件
组件
js中定义事件处理函数
Page({
bindViewTap:function(event){
...
}
})
模板
odd
even
小结
小程序的整理结构很简洁，逻辑层是基础的JS+API，视图层需要我们好好熟悉一下各个组件及其属*
以上便是小编为你整理的内容，你知道微信小程序开发思路与方法是什么了吗?希望小编的内容对你有所帮助，如果需要了解更多信息，请关注微微风，我们将为你提供最新最全面和最准确的信息，如果还有其他问题，你可以在下方留言。
推荐阅读：
微信有文字滚动小程序吗?如何实现?
微信小程序弹幕如何开发?
个人公众号如何接入小程序?
上一篇：微信小程序入门开发方法是什么？
下一篇: 朋友圈旅游照片必配文字有哪些？