一、简介
微信小程序账号、微信web开发者工具(包括小程序和公众号网页开发)、编译(Ctrl+B)(第一次编译无效果时重启工具)、预览(自动上传代码,微信扫码可预览开发版)。
参考:https://developers.weixin.qq.com/miniprogram/dev/
二、工程
工程构成:页面:wxml(weixinxml,类似html)、wxss(weixincss,等同于css)、js,工程:app.js(启动页、日志、小程序默认顶部设计等)、app.json、app.wxss(所有页面可用的css)、project.config.json。
参考:
https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html
工具设计界面可调整机型、显示百分比、数据连接方式。
三、发布
代码开发结束后可在工具中上传,在微信公众平台中登录,开发管理中可设置小程序体验版,提交审核,审核通过后发布,可以得到线上版本。上线后在首页中可看到实时访问次数。
个人上线了一个木材材积计算器(两天做的,有web前后端经验很容易入手,有增加、共计、记录功能)(审核很快,一天审核结束),后来发现已经之前有公司做了,尴尬,而且不知道如何盈利,就当练习了。
更多示例推荐:
https://blog.csdn.net/zhonggaorong/article/details/54377029
四、知识点总结
备注:
没有div,多了view、scroll-view等封装性更强的组件。
js的page包括data、标签属性等,方法需在page外。
Page({
data: {
length: 0,
...
items: [],
itemCount: 0,
},
1、取代DOM操作
var query = wx.createSelectorQuery();
query.select('#add').boundingClientRect();
query.exec(function (res) {console.log(res[0].height)});
2、标签传值
<view class='row'>
<text>长度:</text>
<input type='number' id='length' bindinput='lengthInput'></input>
<text>m:</text>
</view>
<button id='add' bindtap='addItem'>增加</button>
lengthInput: function (e) {
this.setData({ length: e.detail.value });
},
addItem: function (e) {
var length = this.data.length;//前端如果标签内容为{{length}},内容自动改变
}
3、追加标签(相当于jQuery的append)(最新的scroll-view组件可以自动扩展大小,不需要设置scroll-top)
<scroll-view scroll-y="true">
<block wx:for="{{items}}" wx:key="*this">
<view class="item" id="item{{index}}">{{item.index}}:长{{item.length}}m,直径{{item.diameter}}cm,{{item.number}}根,{{item.unitPrice}}元/立方,{{item.itemVolume}}立方,{{item.itemPrice}}元</view>
</block>
</scroll-view>
var items = this.data.items;
console.log(itemCount + "-" + oneVolume + "-" + itemPrice);
var item = { index: itemCount, length: length, diameter: diameter, number: number, unitPrice: unitPrice, itemVolume: itemVolume, itemPrice: itemPrice };
items.splice(0, 0, item);
this.setData({ items: items, itemCount: itemCount });