微信小程序介绍-爱红旗渠

文章目录

1. 环境配置
2. 项目结构介绍
3. 上线
4. Samples

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

环境配置

申请账号

访问 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据提示完成注册账号。注册完成后，登陆 https://mp.weixin.qq.com ，在设置-开发设置中可以找到小程序 AppID。

安装开发工具

微信小程序开发工具下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201818
开发工具详细介绍见：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html?t=201818

Hello World

打开微信开发者工具，登录后点击右下角”+”按钮，进入如下界面：

Project Init

选择项目目录，填写刚刚申请的 AppID 和x项目名称。并选中”建立普通快速启动模板”。点击创建，Hello World就创建出来了。

项目结构介绍

项目目录结构如图：

Project Info

APP.JSON

app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

例子：

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

pages 和 window 介绍：

pages字段：用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段：小程序所有页面的顶部背景颜色，文字颜色定义在这里的。

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>

从上面代码可以看出，代码风格很像HTML，同时也有自己的语法如wx:if和wx:else。更多语法请参考 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/ 。

WXSS

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。示例代码如下：

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}