标题微信小程序开发笔记

一，引言

小程序就是一个前端，语法和前端差不多
即使是是小白，看着开发文档也可以做出来一个小程序

二，写小程序一定要看官方文档

微信小程序官方文档

三，文件目录

每个页面都会有以下四种文件
.js：对应的是js文件，主要存放一些数据和动作渲染
.json：对应的是一些配置文件，存放的都是一些页面配置
.wxml：对应的是html文件，存放的是一些组件
.wxss：对应的是css文件，主要是一些渲染

四，全局配置文件

这四个文件控制的是全局性配置
app.js

// app.js
App({onLaunch() {// 展示本地存储能力const logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionId}})},globalData: {userInfo: null}
})

app.json

"pages" 中存放的是所有页面路径
"window" 中设置的是整体页面布局
"tabBar" 是下面三个栏目
"style" 是版本号
"sitemapLocation" 存放的是sitemap配置文件路径

{"pages": ["pages/index/index","pages/logs/logs","pages/news/news","pages/mine/mine","pages/detail/detail","template/list/list"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Junnix_Test","navigationBarTextStyle": "black"},"tabBar": {"color": "#333","selectedColor": "#ff0000","backgroundColor": "#f5f5f5","borderStyle": "black","position": "bottom","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "icon/home.jpg","selectedIconPath": "icon/_home.jpg"},{"pagePath": "pages/news/news","text": "新闻","iconPath": "icon/news.jpg","selectedIconPath": "icon/_news.jpg"},{"pagePath": "pages/mine/mine","text": "我的","iconPath": "icon/my.jpg","selectedIconPath": "icon/_my.jpg"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

sitemap.json：

{"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html","rules": [{"action": "allow","page": "*"}]
}

app.wxss

@import是导入外部wxss文件
.container 是对container类的一些文字渲染
view 是所有view组件的文字渲染

/**app.wxss**/
@import "common/common.wxss".container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 200rpx 0;box-sizing: border-box;
} view{color: #333;
}

五，公共配置

如果多个页面需要引用
一个图片
或者多个页面需要某个文字渲染
或者多个页面需要引用一个组件
那么我们就可以做一些全局性配置

1. 公共配置文件

common文件夹
下面存放需要的配置即可
如：我这里存放了一个公共文字渲染文件

common.wxss

view{color: red;
}

在其他页面的.wxss文件中引入即可使用
app.wxss

@import "common/common.wxss"

2. 公共照片文件

icon文件夹
下面存放了一些照片

3. 页面模板

template文件夹
这里和正常页面设置一样
如，模板页面名字交list
那么这里就需要四个页面文件

list.js

// template/list/list.js
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

list.json

{"usingComponents": {}
}

list.wxml

{{img}} {{info}}两个括号包起来的数据表示占位符，需要数据绑定

<!--template/list/list.wxml-->
<!-- 定义模板 -->
<template name="list"><view class="list"><view class="left">{{img}}</view><view class="right">{{info}}</view></view>
</template>

list.wxss

.list：是对list类的渲染
.list .left：是对list类下left类的渲染
.list .right：是对list类下right类的渲染

/* template/list/list.wxss */
.list{display: flex;margin: 30rpx 0;
}
.list .left{width: 200rpx;height: 200rpx;background-color: skyblue;
}
.list .right{flex: 1;background-color: yellowgreen;
}

六，页面配置

七，组件概述

八，框架概述

九，使用HBuilder X开发小程序