微信小程序开发思路与开发方法是什么？
如今，几乎每个人都经常使用微信。微信小程序是微信近期推出的一项新功能。微信小程序的很多功能给我们带来了很多便利。最近，很多微信用户向我询问微信小程序的开发思路和方法。它是什么？下面小编就带大家了解一下微信小程序开发的思路和方法有哪些？
整个框架
默认示例项目的目录结构
从后缀名可以看出，有4种：
js逻辑代码
wxml视图文件
wxss样式文件
json配置信息
/app.js 可以定义小程序启动时会做什么业务逻辑、全局函数、全局数据.
应用程序（{
onLaunch函数() {
.
},
获取用户信息：函数（cb）{
.
},
全局数据：{
用户信息：空
}
})
/app.json 进行小程序的全局配置，比如底部导航有哪些标签、有哪些页面、页眉标题、背景颜色.
{
“页面”：[
'页面/索引/索引',
],
'窗户'：{
'navigationBarTitleText''微信',
},
'标签栏'{
'列表'： [{
'pagePath''页面/索引/索引',
“文本”：“家”
}, {
'pagePath''页面/日志/日志',
'文本'：'日志'
}]
}
}
/app.wxss 定义css 样式
/pages 目录包含我们的每个自定义页面。一个页面是一个包含4个文件的目录：该页面的业务逻辑、视图、样式和配置。
在/app.json 中定义页面时不使用后缀名称
{
“页面”：[
'页面/索引/索引',
'页面/日志/日志'
]、
}
这是一条规则。页面上四个文件的名称必须一致。当需要哪种类型的文件时，小程序会自动查找。
整体结构包括：
1.基本代码
app.js定义了小程序启动、隐藏等生命周期的流程、全局函数和数据。
在app.json中配置底部导航标签、哪些页面可用等全局信息
app.wxss中定义小程序的基本样式
2.页面详细代码
每次添加页面时，都会在/pages目录下创建一个新的页面子目录，并将页面代码写入其中。
在wxml中定义页面的布局结构，有哪些组件（如图片、表单）、绑定数据、绑定事件处理函数
在js中定义本页面需要的数据，各个生命周期（如页面加载、卸载）的处理逻辑和事件处理函数
json中定义本页面的个性化配置
在wxss中定义本页面的个性化样式
逻辑层
反应式数据绑定
页面中的数据变化不需要我们手动更新。当绑定的数据发生变化时，页面会自动更新。
例如
//查看页面代码
你好{{name}}！
点我吧！
绑定了name的数据，还定义了一个按钮。单击时，将触发changeName 方法。
//页面逻辑代码
页（{
数据： {
名称：'ABC'
},
更改名称：函数（e）{
this.setData({
名称：'123'
})
}
})
该页面最初将显示“Hello ABC！”
点击按钮后，会触发changeName方法，将name的值修改为‘123’，页面会更新为‘Hello 123!’
应用程序编程接口
提供的API非常丰富，比如：文件上传下载、WebSocket、录音、拍照、录像、本地数据存储、GPS、重力感应、指南针、支付……
模块化的
支持模块化开发，可以将一些常用代码提取到单独的js文件中，作为一个模块，通过module.exports和require
公开和引用模块
例子
定义模块
//common.js
函数sayHello(名字) {
console.log('你好' + 姓名+ '!')
}
module.exports.sayHello=sayHello
呼叫模块
var common=require('common.js')
页（{
你好：函数（）{
common.sayHello('米娜')
}
})
视图层
成分
视图是由组件组成的，比如按钮、输入框、进度条、文本、图片、视频、对话框……
按钮
北京
上海
加载中.
逻辑处理
1. 循环
初始数据
页（{
数据： {
项 [{
消息：'foo'，
}, {
消息：“酒吧”
}]
}
})
循环显示
{{index}}：{{item.message}}
2、条件判断
使用wx:if='{{condition}}'来判断代码块是否需要渲染，例如
事件
在组件上绑定事件
成分
在js中定义事件处理函数
页（{
bindViewTap：函数（事件）{
.
}
})
模板
奇怪的
甚至
概括
小程序的结构非常简单。逻辑层是基本的JS+API。视图层要求我们熟悉每个组件及其属性。
以上是小编为您整理的内容。你知道微信小程序开发的思路和方法是什么吗？希望小编的内容对您有所帮助。
