小程序（一）小程序开发申请流程申请账号每个邮箱仅能申请一个小程序 https://mp.weixin.qq.com/w

小程序开发申请流程

申请账号每个邮箱仅能申请一个小程序 mp.weixin.qq.com/wxopen/ware… 登录邮箱激活小程序
安装微信开发者工具
新建项目选择代码在本地的存储地填入刚刚申请的AppID 每个小程序开发都要有AppID

小程序的代码构成

JSON是一种数据格式 而不是一种编程语言在小程序中 JSON扮演静态配置的角色 app.json 全局配置包括所有的页面路径页面表现网络超时时间底部tab等等

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  }
}

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录，配置完页面信息自动生成文件目录
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

其他配置项细节可以参考文档小程序的配置 app.json 。

2. WXML相当于网页中的html

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image 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>

html网页中一般用 div p span等标签 wxml中一般用 view button block

wx:if和{{}} 和vue的语法比较像做显示判断和模板编译

js更新数据：

this.setData({ msg: "Hello World" })

类似于react的跟新数据

3. WXSS样式相当于网页中的css

具有css的大部分属性小程序在 WXSS 也做了一些扩充和修改。

新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一
些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小
程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全
局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。此外 WXSS 仅支持部分 CSS 选择器

更详细的文档可以参考 WXSS 。

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

内联样式

<view style="color:{{color}};" />

<view class="normal_view" />

4.JS逻辑交互

1.点击事件

<button bindtap="clickMe">点击我</button>

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})