小程序.jpg

这里默认读者的微信开发工具都已经安装好了。

1、新建小程序，没有 AppID 可以使用测试号。语言使用 JavaScript。

• 我们先看一下 app.json 文件

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

• 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

pages 是页面路径列表，也就是新建的页面也会出现在里面，默认加载第一个的页面路径。

window 用于设置小程序的状态栏、导航条、标题、窗口背景色。
navigationBarBackgroundColor 导航栏背景颜色
navigationBarTextStyle 导航栏标题颜色，仅支持 black / white
navigationBarTitleText 导航栏标题文字内容
backgroundTextStyle 下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh 是否开启当前页面的下拉刷新。
onReachBottomDistance 页面上拉触底事件触发时距页面底部距离，单位为px。

导航栏.jpg

tabBar （客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
color tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor tab 的背景色，仅支持十六进制颜色
borderStyle tabbar上边框的颜色， 仅支持 black / white
list tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position tabBar的位置，仅支持 bottom / top
custom 自定义 tabBar

list 是一个数组 里面的数据定义：
pagePath 页面路径，必须在 pages 中先定义
text tab 上按钮文字
iconPath 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。当 postion 为 top 时，不显示 icon。
selectedIconPath 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。当 postion 为 top 时，不显示 icon。

tab.jpg

networkTimeout 各类网络请求的超时时间，单位均为毫秒。
request 请求时间

2、新建 一个 page 。

xxx.js 的文件内容 ，网络请求、页面数据处理、 下拉上拉数据刷新、分享页面

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

xxx.json 这个跟上面写的 app.json 一样的。可以在里面对当前的页面的导航文字颜色进行重定义。

xxx.wxml 这是写展示的页面，是由 html 标签对 组成的。刚创建会有一个 text 。也就是把路径给输出来了。

  <text>pages/demo/demo.wxml</text> 

这里就举几个例子

<text>这是一个测试</text>
<button>这是一个按钮</button>
<image src='/images/icon.jpg'></image>
<input placeholder='请输入账号'></input>
<switch checked='true'></switch>

展示的样子如下

demo.jpg

可以看到上面展示出来的控件，但是我们会发现有一些问题，就是说样式不是咱们想要的，那么我们要在里面加点样式，使界面看起来好看一点。

xxx.wxml 代码如下

<view class='demo-back'>
  <text class='text-class'>这是一个测试文字</text>
  <button class='button-class' hover-class='click-class'>这是一个按钮</button>
  <image src='/images/icon.jpg'></image>
  <input class='input-class' placeholder='请输入账号'></input>
  <switch checked='true'></switch>
</view>

xxx.wxss 代码

.demo-back {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: bisque;
}

.text-class {
  color: red;
  font-size: 20px;
  margin-top: 30rpx;
}

.button-class {
  color: white;
  background-color: rgb(111, 111, 223);
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}

.click-class {
  color: white;
  background-color: yellowgreen;
}

.input-class {
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  width: 80vw;
  height: 44rpx;
  border: 1rpx blue solid;
  border-radius: 22rpx;
}

效果如下

效果.jpg

自己动手实践是学习最快的路径。

基础就写到这里。相信还会有一些疑问，比如网络请求，布局方式，数据处理等等。这都放在下一篇文章中讲。

下一篇文章主要讲

网络请求
布局方式
页面跳转
方法点击
数据处理、存储