微信小程序开发入门(1)

本文面向已经有一定html和js基础的人群

第一步：

安装开发工具，前往微信公众平台即可下载，这里直接给个下载链接。

第二步：

新建一个小程序项目，目录选好，AppID这一栏直接无视，点体验，反正也不是正式开发。

要正式开发的话得先去微信公众平台注册个小程序，把对应的appid填上就行了。

第三步：

可以看到pages目录下的index目录里的三个文件，分别对应的是普通网页里的html，js与css，有点类似angular2的项目。

除了js，wxml和wxss外，你还可以加个对应的json文件，代表配置文件。

点开index.js，可以看到：

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },

可以尝试下把示例的data里的matto:'Hello World'改成其他内容，即把Page对象下的data里的motto变量对应的字符串改下就可以做到。

对比这里的wxml与普通网页的html区别只是部分标签的名字发生了改变，并添加了很多新的多功能的标签。

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

这里的“{{motto}}”即能直接显示motto变量代表的字符串，用过angular和jquery等框架的相信很熟悉。

第四步：

编译调试运行，直接点击编译或者ctrl+s保存的时候自动监控改变重新自动编译。

也可以点击预览然后用手机扫码测试。