年前的时候，因为公司开发小程序的人员不够，临时参与了一个项目中几个小模块的开发，这里做个简单的小记录，眼过千篇不若手过一遍，希望将来如果要用到时不至于大脑空白！
开发工具：wechat_devtools
一，准备工作
1.申请账号。
2.安装开发工具。
二，小程序代码构成
1.json配置：app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。这里说pages,window,tabBar三个项目中使用到的主要配置项，其余配置可参考小程序配置app.json
先贴一个配置代码：
{ "pages": [ "pages/index/index", "pages/info/info", "pages/detail/detail", "pages/unpay/unpay", "pages/history/history", "pages/mall/mall", "pages/discover/discover" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "紫微斗数", "navigationBarTextStyle": "black" }, "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "测算", "iconPath": "images/index_icon1.png", "selectedIconPath": "images/index_icon2.png" }, { "pagePath": "pages/history/history", "text": "我的", "iconPath": "images/history_icon1.png", "selectedIconPath": "images/history_icon2.png" }, { "pagePath": "pages/discover/discover", "text": "发现", "iconPath": "images/discover_icon1.png", "selectedIconPath": "images/discover_icon2.png" }, { "pagePath": "pages/mall/mall", "text": "商城", "iconPath": "images/mall_icon1.png", "selectedIconPath": "images/mall_icon2.png" } ], "color": "#7C7C7C", "selectedColor": "#BA3E3E", "borderStyle": "white", "backgroundColor": "#fff", "position": "bottom" } }
- pages:
接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。
文件名不需要写文件后缀，因为框架会自动去寻找路径下
.json,.js,.wxml,.wxss四个文件进行整合。
例如：“pages/detail/detail”。将对应detail文件夹中的js,json,wxml,wxss四个文件。
- window:用于设置小程序的状态栏、导航条、标题、窗口背景色。各字段可见名知意。
"window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "紫微斗数", "navigationBarTextStyle": "black" },
- tabBar:
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
Tip：
- 当设置 position 为 top 时，将不会显示 icon
- tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
- List后面的参数用来设置底部导航的样式，例如字体颜色，选中颜色以及背景色等等。
"tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "测算", "iconPath": "images/index_icon1.png", "selectedIconPath": "images/index_icon2.png" }, { "pagePath": "pages/history/history", "text": "我的", "iconPath": "images/history_icon1.png", "selectedIconPath": "images/history_icon2.png" }, { "pagePath": "pages/discover/discover", "text": "发现", "iconPath": "images/discover_icon1.png", "selectedIconPath": "images/discover_icon2.png" }, { "pagePath": "pages/mall/mall", "text": "商城", "iconPath": "images/mall_icon1.png", "selectedIconPath": "images/mall_icon2.png" } ], "color": "#7C7C7C", "selectedColor": "#BA3E3E", "borderStyle": "white", "backgroundColor": "#fff", "position": "bottom" }
2.WXML 模板：这就类似于我们的html标记语言，不过规则略微不同，详情可参考官方文档 小程序WXML。
<!--pages/detail/detail.wxml--> <view class="body" style="width:{{width}}px;height:{{height}}px;"> <scroll-view class="main" scroll-y style="width:{{width}}px;height:{{height}}px;"> <view class="bg-box"> <image src="../../images/banner.jpg" mode="widthFix"></image> <view class="user-message clear"> <view class="box"> <image src="{{userInfo.avatarUrl}}" mode="widthFix" style="border-radius:50%;"></image> <view class="name">姓名：{{orderList.name}}</view> <view class="p-box">阳历 ：{{orderList.year}}年{{orderList.month}}月{{orderList.day}}日 {{hours[orderList.hour]}}时</view> </view> </view> <view class="info-box"> <view style="margin-bottom:1rem;color:#7F453A;font-size:0.875rem;font-weight:bold;">您已解锁下列测算内容，点击可查看详情。</view> <view class="m-body"> <view class="ul"> <block wx:for="{{list}}"> <view class="li ispay" catchtap='changePage' data-index="{{index+1}}"> <view class="tit-box"> <view class="tit_s">{{item.title}}</view> <view class="sanjiao">></view> </view> </view> </block> <view style="width:100%;height:20px;"></view> </view> </view> </view> </view> <view style="height:2.4rem;"></view> </scroll-view> </view>
3.WXSS :WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。
- 新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
- 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
- 此外 WXSS 仅支持部分 CSS 选择器
更详细的文档可以参考 WXSS 。
app.wxss中可以设置所有页面的样式，每个具体样式文件中，只能设置它对应的文件的样式。
4.JS交互：微信小程序中，我们不能直接操作dom，只能在wxml对应的js文件中定义好函数，然后使用某种绑定方式（比如bindtap）绑定到dom元素上，来触发。
<view>{{ msg }}</view> <button bindtap="clickMe">点击我</button>
点击 button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：
Page({ clickMe: function() { this.setData({ msg: "Hello World" }) } })
三，小程序的能力
1.小程序启动：
微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径，写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。
于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。
小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:
App({ onLaunch: function () { // 小程序启动之后 触发 } })
整个小程序只有一个 App 实例，是全部页面共享的，更多的事件回调参考文档 注册程序 App 。
2.小程序的页面：
看看detail.js文件的内容
// pages/detail/detail.js var app = getApp(); Page({ /** * 页面的初始数据 */ data: { data1: 0, }, onLoad: function (options) { }, getInfo:function(sn){ }, changePage: function (res) { var index = res.currentTarget.dataset.index; var sn = this.data.sn wx.navigateTo({ url: '../info/info?index=' + index + "&sn="+sn }) }, onShareAppMessage: function () { return { } } })
Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。
在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。所有页面中需要用到的函数等都要写在page构造器的内部，然后在合适的时机被调用。
有关于 Page 构造器更多详细的文档参考 注册页面 Page 。
备注：在传统的html开发的页面中，如果没有做特殊处理，只有当页面中引用了对应的样式文件和逻辑交互代码文件，它们才会起作用。前面提到过，微信小程序会自动匹配文件，所有只要你的文件名命名规范，所有页面的样式及交互文件会自动被引用。
3.组件：小程序提供了丰富的组件可以供我们使用，同时我们也可以自己自定义符合自己要求的组件。
组件的引用和html中的标签类似，我们还可也给组件传值，例如我们要显示地图，并且在用户单击地图时做出响应代码可以如下来书写：
<map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>
这个地图组件的中心将是广州的经纬度，同时单击地图时会触发绑定的markertap事件。我们也可以通过class类名或者style来控制组件的样式。
更多的组件可以参考 小程序的组件 。
4.API:为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用。
需要注意的是：多数 API 的回调都是异步，需要处理好代码逻辑的异步问题。
API 能力见 小程序的API 。
四，发布前的准备
五，上线
四五两点需要有相应的身份才可以使用，这个具体需要用到时可以去官网查阅。^_^
扫一扫
920
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
