详解⼩程序开发（项⽬从零开始）
⼀、序
⼩程序，估计⼤家都不陌⽣，现在应⽤场景特别多。今天就系统的介绍⼀下⼩程序开发。注意，这⾥只从项⽬代码上做解析，不涉及⼩程序如何申请、打包、发布的东西。（这些跟着官⽅⽂档的流程⾛就好）。好了废话不多说，看⽬录。
注: ⼩程序是⼀套特殊的东西，融合了原⽣和web端。他是⼀个不完整的浏览器对象，所以很多DOM 、 BOM 的东西⽆法使⽤，但是他⼜通过APP实现了多线程。
⼆、如何创建⼩程序
很简单，⾸先下载开发者⼯具，下载稳定版本的就好。然后，创建⼩程序，可以参考下述图⽚：
注意正式的⼩程序需要审批，拿到正式的APPID，我们测试的或者暂时没有的可点那个测试的appid，⼩程序模板选择默认就好。按照这样的流程⾛完，我们就创建完⼀个⼩程序了。
三、webstrom⽀持⼩程序开发
创建完⼩程序之后，我们先不着急开发。⼯欲善其事必先利其器，开发者⼯具有点卡，⽽且功能少，开发效率很低。所以我们还是改造⾃⼰的编译器，这⾥只介绍2种⽅法。⼀是 hbuilderX，他有⽀持⼩程序的模块，很⼩巧的⼀款编译器；⼆是webstorm，我⽤的他，在这介绍⼀下配置的⽅法，其他的⼤家⾃⾏google吧。
1、⽀持wxml和wxss的⽂件类型，有语法⾼亮。打开webstorm编译器，依次点击⽂件 -- 设置 -- 编辑器 -- ⽂件类型，到html⽂件，添加 *.wxml; 到Cascading style Sheet ，添加 *.wxss。就OK了
2、⽀持⼩程序代码提醒。这个⽂件，然后，把他放到⼀个显眼的地⽅；然后， webstorm 点击⽂件 -- 导⼊设置，到这个下载的⽂件，点击确定即可。
以上就是webstorm⽀持⼩程序语法的操作。
四、基础⽂件⽬录详解
然后解释⼀下⼩程序的⽬录结构。
pages：包含的页⾯。每次新增页⾯都得在这⾥引⼊，否则新页⾯的json配置等⽆法⽣效。注意pages中页⾯先写的先渲染，所以数组第⼀条也就是我们的⾸页。
window：配置所有页⾯导航条字体、颜⾊、背景⾊等
app.js: ⼩程序⼊⼝⽂件。⽣成⼩程序实例，App({}), 通常在这获取⽤户信息、授权信息、定义全局变量等。
app.wxss: ⼩程序全局 style ⽂件。对整个项⽬页⾯⽣效。通常规定项⽬的字体、基础颜⾊，定义⼀些公共样式。
utils: ⼯具函数⽬录。通常⽤来放⼀些公共的js⽅法。⽐如封装的request请求，⼀些别的处理数据什么的⽅法。
pages: ⼩程序的页⾯⽬录。所有的⼩程序页⾯，都写在这⾥⾯。
五、完善项⽬⽬录
上边⼤致解释了⼀下⼩程序的基础⽂件，现在按照常见的规范完善⼀下项⽬⽬录，这⾥⾯包含⼀些个⼈见解，有需要的参考即可。先看⼀下结果：
现在解释⼀下这些⽬录：
components：我们封装的⼩程序可复⽤组件。
constants：⼀些项⽬中的常亮。
image：⽤到的图⽚。
services：⽤到的所有接⼝⽬录
⼤致就新建了这⼏个，如果有别的需求，根据⾃⼰的情况增加。
六、基础语法详解
现在⼤致解释⼀下⼩程序的语法。⾸先，创建新页⾯，默认都创建 *.wxml *.wxss *.js *.json 和我们平时写的代码差不多，都是html js css，多了个json配置⽂件
*.json：常⽤的属性有2⼤块，navigationBarTitleText 相关的设置顶部标题的，usingComponents 引⽤的组件
*.js：getApp() 获取⼩程序实例，拿全局变量等； Page({}) 创建页⾯； data 当前页⾯的变量；onLoad
⽣命周期，页⾯加载完毕。
*.wxml：注意，⼩程序⽀持的标签很少，像 span 是⽀持的，div不⽀持，⼀般⽤view代替块级，span、text 代替⾏级。*.wxss：⼤部分css选择器不⽀持，⽀持的好像才5个，想⽀持less等得⾃⼰配置  　
// json⽂件
{
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black",
"navigationBarTitleText":"我的",写文章的小程序
"usingComponents": {
"menu": "/components/menu/index"
}
}
// js⽂件
const app = getApp()
Page({
data: {},
onLoad: function () {},
})
七、实现页⾯跳转
和通常的web开发⼀样，⼩程序页⾯跳转页分2中，wxml中的vavigator标签，以及js的navigator相关的api。路由跳转的⽅法有好⼏个，这⾥不⼀⼀赘述了，常⽤的直接跳转
wx.navigateTo，重定向 wx.redirectTo等等，具体的请看官⽅⽂档。这⾥强调⼀下路由传参，很简单：
1、少量数据。直接问号传参。然后在⽬标页⾯的onLoad⽅法中通过options参数接收。
2、⼤量数据。直接塞到全局变量⾥⾯。
// wxml跳转页⾯
<navigator url="/pages/my{{item.path}}" class="navigator">
<image class="imgIcon" src="{{item.icon}}"></image>
<view class="navigator-text" data-id="{{item.key}}" bindtap="handleMenuTap">{{item.name}}</view>
</navigator>
//js跳转页⾯
wx.navigateTo({
url: `/pages/my/appointDetail/index?_id=${this.data.marker.id}`
})
//路由传参如何接收
onLoad: function (options) {
  console.log(options)
},
⼋、wx.request 的封装
在utils中新建request.js，简单封装了⼀下，⼀些数据要全局配置的都引进来，然后做了些错误的统⼀处理，没什么难度，不过要特别注意⼀下cookie的携带。具体代码如下：
const app = getApp()
export default function request(url, options = {}) {
return new Promise(function (resolve, reject) {
url: `${igin}${url}`,
method: 'GET',
...options,
data: options.data,
header: {
'content-type': 'application/json',
'cookie': wx.getStorageSync("cookie")
},
success: function (res) {
//重新授权登录
if (res.statusCode === 401){
return
}else if (res.statusCode !== 200) {
reject({ error: '服务器忙，请稍后重试', code: 500 });
return
} else {
if (url === '/api/cdz/user/weixin/login') {
const cookie = res.header["set-cookie"] || res.header["Set-Cookie"];
if (cookie) wx.setStorageSync("cookie", cookie);
}
resolve(res.data);
}
},
fail: function (res) {
// fail调⽤接⼝失败
if (url === '/api/cdz/user/weixin/login') {
const cookie = res.header["set-cookie"] || res.header["Set-Cookie"];
if (cookie) wx.setStorageSync("cookie", cookie);
}
reject({ error: '⽹络错误', code: 0 });
}
})
})
}
然后我们使⽤的时候直接使⽤封装好的request⽅法，这样所有的api就封装成⼀个个函数。我们在页⾯中直接import引⼊调⽤即可。
import request from "../utils/request";
import { stringify } from "../utils/util"
export function testPost(data) {
return request(`/api/test/post`, {
method: 'PUT',
data,
})
}
export function testGet(data) {
return request(`/api/test/get`)
}
九、使⽤ npm （引⼊ weui、moment等插件）
因为⼩程序使⽤的是不完整的浏览器对象，所以很多js包都是不好使的，⽐如jquery之类的。所以npm基本是废了，能⽤的依赖包很少，具体哪些能⽤得⾃⼰发掘了。这⾥还是要介绍⼀下⼩程序如何使⽤npm，毕竟有些包还是要⽤的。
1、打开开发者⼯具 -- 点击详情 -- 勾选使⽤npm模块
2、打开命令⾏，进⼊项⽬的根⽬录下， npm init 初始化npm
3、npm i 。。。安装你需要的依赖
4、打开开发者⼯具 -- 点击⼯具 -- 点击构建npm。此时⼩程序会将 node_modules ⽂件编译打包，⽣成新⽬录miniprogram_npm ，
5、在需要⽤到的页⾯的js⽂件中，const moment= require('moment') 引⼊，直接使⽤即可
6、最后记得忽略⽂件。新建 .gitignore ⽂件，node_modules 、 package_lock.json 等⽂件不需要上传，最好只保留⼩程序的npm构建包，⽤什么依赖也是的那个下载。这个到不是必须的
ps: 特殊注意⼀下weui的引⼊，这个ui库是纯css的，没有js⽂件，所以他没法⽤npm引⼊，⽽是直接下载⽂件，我直接丢到根⽬录下，然后在 app.wxss ⽂件的开头引⼊
@import 'weui.wxss';，这样使⽤的
⼗、封装⼩程序可复⽤组件
现在篇幅有点太长了，这个另写⼀篇，有需要的可以去看。
⼗⼀、总结
以上就是我开发⼩程序的⼀些经验和总结，希望能帮到你。另外，整套程序的⾻架（业务代码删掉了）我会上传到github，有

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