这里默认读者的微信开发工具都已经安装好了。
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。
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 自定义 tabBarlist 是一个数组 里面的数据定义：
pagePath 页面路径，必须在 pages 中先定义
text tab 上按钮文字
iconPath 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。当 postion 为 top 时，不显示 icon。
selectedIconPath 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。当 postion 为 top 时，不显示 icon。
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>
展示的样子如下
可以看到上面展示出来的控件，但是我们会发现有一些问题，就是说样式不是咱们想要的，那么我们要在里面加点样式，使界面看起来好看一点。
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;
}
效果如下
自己动手实践是学习最快的路径。
基础就写到这里。相信还会有一些疑问，比如网络请求，布局方式，数据处理等等。这都放在下一篇文章中讲。
下一篇文章主要讲
网络请求
布局方式
页面跳转
方法点击
数据处理、存储
