基础篇
微信小程序目前比较热门，笔者在疫情期间参加了一期微信小程序训练营，收获颇多，最近微信又组织了一期训练营，为了巩固知识，编制了本系列实践体会，训练营是为期10天，学习内容的话是微信的官方教程，本次训练营教程的参考链接：
小程序开发入门
任何技术想学会需要几个方面的内容，要有知识储备，然后要进行实践，以笔者从业12年的经验，想进入到计算机这个行业，知识一定要学，实践也少不了，知识不学叫啥半瓶子晃荡，有一点点技术容易飘，只有知识没有实践能力又会纸上谈兵，好些业主可能被厂商宣贯的多就感觉自己啥都懂了，其实离懂还有十万八千里，废话不多说，具备的基础知识：
- html 这个对应wxml其实就是要了解一个页面是如果构建出来的的，比如标题用什么表达，段落用什么表达，表单是什么意思，熟悉各种标签的用法，没有html的基础是看不懂wxml的语法的；
- css 这个对应wxss主要解决布局的问题，比如我一个页面是两行三列，每列要居中对齐，元素之间要有间距，要设置颜色、字体等等，学会css页面才会增色不少；
- js 这个微信没有独创，还是一样的语法，js蛮重要，比如点一个链接打开另外一个页面，那肯定需要传参，在打开的新页面需要获取数据并显示，诸如此类的各种交互都是需要在js中完成的，一句话就是js会接收传入的参数，然后进行一系列的处理将结果返回给页面进行显示；
- es6 学习这个主要是能看懂后台逻辑，里边好些语法是用es6写的，需要熟悉语法才能进行更深一步的学习；
- nodejs 基本上后台的架构是基于这个的，比如调用数据库，必须得会，要不然连基础环境都搭建不起来；
- mongedb 小程序提供的数据库就是这个，就是一个json数据库，有这个基础能明白数据库的语法，如何按照这种数据库进行表的设计，日常是如何操作的；
当然了，号称是零基础可以学习，也不用太在意，主要是让你建立信心罢了，别人的话听一半，后一半就需要自己努力了。
创建项目
双击开发工具，在打开的开发工具点击项目->新建项目
新建的时候需要填入自己小程序的AppID，可以在小程序的后台找的到
项目创建好后会生成许多目录，我们要做的就是进行清理
pages目录下只保留index文件夹，cloudfunctions目录里的云函数都可以删掉,index.wxml、index.wxss、index.js都清空
app.json的代码
{ "pages": [ "pages/index/index" ], "window": { "backgroundColor": "#F6F6F6", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#F6F6F6", "navigationBarTitleText": "云开发 QuickStart", "navigationBarTextStyle": "black" }, "sitemapLocation": "sitemap.json", "style": "v2" }
index.js的代码
Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
基础环境就搭建好了，可以开始进入主题了
开通云开发
项目的模板搭建好后，第一次使用的时候需要开通云开发，云开发的开通非常简单，在开发工具点击云开发的图标，按照步骤填就可以了
有两种途径可以进入到云开发的后台，一种是在开发工具点击云开发进入
另外一种是访问云开发的官网：云开发官网
每个账号可以开通两个环境，我现在一个是开通的包月付费，一个是开通的按量付费，区别是按量付费可以托管静态网站，对于一个企业来说从企业的官方网站到小程序再到内部的管理软件都可以依托腾讯云建立，是不是非常方便呢，我建议两个环境都建立，因为本次训练营既包括小程序的学习还有web端的学习，非常期待后几天的教程。
App.json的配置
App.json可以配置小程序全局窗口的表现形式，符合json对象的语法，以{}作为开始和结束的标志
{ "pages": [ "pages/index/index" ], "window": { "backgroundColor": "#14171e", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#2b2b43", "navigationBarTitleText": "小程序云开发训练营", "navigationBarTextStyle": "white" }, "sitemapLocation": "sitemap.json", "style": "v2" }
配置好的效果是这样的
我将头部导航条的背景色设置成黑色，文字设置成白色，里边的内容的背景色也设置成黑色，但试了半天发现不起作用，搜索了一下原来是需要设置index.wxss里page的样式
/**index.wxss**/ page { background: #14171e; display: flex; flex-direction: column; justify-content: flex-start; } .banner{ margin:5px; }
一开始用ps进行了取色，后来百度了一下原来用QQ截图更快，先ctrl+alt+a 截图，然后按住ctrl键切换到16进制颜色，在需要取色的地方再继续按住C键就可以直接获取到16进制的验色了，直接复制到backgroud的值就可以啦。
完成态的首页
index.wxml
<view class="banner"> <image class="img" src="../../images/banner.jpg"></image> <view class="info"> <view> <text class="title">0基础小程序云开发训练营</text> </view> <view> <text class="status">当前状态：报名中</text> </view> </view> </view> <view class="banner"> <image class="img" src="../../images/banner1.jpg"></image> <view class="info"> <view> <text class="title">腾讯犀牛【云开发】布道师养成计划--创新实战项目</text> </view> <view> <text class="status">当前状态：实战中</text> </view> </view> </view>
index.wxss
/**index.wxss**/ page { background: #14171E; display: flex; flex-direction: column; justify-content: flex-start; font-size:16px; } .banner{ margin:5px; text-align: center; background:#2B2B43; } .img{ width:100%; height:200px; } .info{ background:#2B2B43; text-align:left; margin:10px; color:white; } .status{ font-size:0.9em; color:#FAE4D5; }
完成后的效果
