微信小程序实战入门

一、简介

微信小程序账号、微信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 });