微信小程序课程的学习心得

目录

前言：

开发平台配置：

经验总结：

目录结构

pages

window

tabBar

networkTimeout

wxss部分

---

前言：

• 由于之前简单学习过js、html、css，数据库也学过一些，所以对于微信小程序开发来说应该算有一点基础，我对微信小程序本身也非常兴趣，因为觉得做出来会很好玩。
• 整体来说，这次微信小程序课程提供的IDE还是比较好用的，入门也比较简单。模拟器，兼容性都很好。开发效率很高，也学到了非常多的东西，加深了对前端知识的应用理解。
• 在暑期训练营云云学长以及其提供的微信小程序文档，还有B站网课的帮助下，自己动手模仿网易云音乐，实现了一个简易的音乐app微信小程序，有了这个小项目的完成，对微信小程序的开发理解又进了一步。

开发平台配置：

• 个人开发者目前没有支付权限，不能开发支付功能。
• 除了管理员对小程序有所有权限，其他开发人员需要填加权限（10名），体验着需要填加体验者权限（20名）。
• request，upload等接口调用都需要配置白名单，每个最多绑定5个域名；协议必须是https。而且每月只能修改三次。

经验总结：

• 调试集成了chrome调试工具，非常好用。
• 整个小程序所有分包大小不超过 4M，单个分包/主包大小不能超过 2M。所以我们的音乐app为了分包，另外分了otherPackage和songPackage两个包。
• 注意生命周期、wxss的写法问题。
• 数据绑定及setDate方法的使用
• api在快速迭代、丰富中，要注意经常查看api文档，此次使用的网易云音乐API即已更新了两次版本。
• 性能优化很重要，具体要参考微信小程序官方文档，写的非常详细，很有帮助

目录结构

• 每个页面包括四个文件：.js，.json，.wxml，.wxss
• 入口文件app.js，app.json，app.wxss（超级重要）。定义一些全局的方法，数据，样式等。整个项目生命周期中只执行一次

语法与html和css的异同

• js 为对象字面量写法。
• wxml已经跟html完全不同。不支持div等。
• wxss跟css大部分相同，但是不支持一些选择器

app.js 入口程序，初始化生命周期及全局变量、方法等

• app.js 这个文件是整个小程序的入口文件,开发者的逻辑代码在这里面实现,同时在这个文件夹里面可以定义全局变量。
• app.json 这个文件可以对小程序进行全局配置,决定页面文件的路径,窗口表现,设置网络超时时间,设置多tab等。
• app.wxss 是小程序的公共样式表。

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
 "window": 
{ 
"navigationBarTitleText": "Demo"
 }, 
"tabBar": 
{ "list": [{ 
"pagePath": 
"pages/index/index", "text": "首页"
 }, 
{ 
"pagePath": "pages/logs/logs", "text": "日志" 
}] }, 
"networkTimeout": 
{ 
"request": 10000, "downloadFile": 10000 
}, 
"debug": true 
}

pages

它的作用是配置小程序的页面,这个配置项是必填的,它接受一个数组,里面的每一项都是字符串,从上面给出的代码: 
"pages": [ 
"pages/index/index", 
"pages/logs/index" 
] 
每一项分别对应的都是实现文件的路径以及文件名. 
这个配置里面的第一行配置是它的初始页面

 

window

这个配置项是用来设置小程序的状态栏、导航条、标题、窗口背景色。

• navigationBarBackgroundColor 它是用来设置导航栏背景颜色,这个属性要输入的是十六进制颜色值.
• navigationBarTextStyle 它是用来导航栏标题颜色的,它的输入类型是字符串(String),但是现在官网给出的文档目前仅支持(black和white)这两种颜色.
• navigationBarTitleText 这个属性是显示导航栏标题内容的,开发者可以根据自己的需要来进行设置.
• backgroundColor 这个属性是设置窗口的背景色的,它需要输入的也是十六进制颜色值的.
• backgroundTextStyle 设置窗口内容的样式的,官方给出的标准说明是下拉背景字体、loading 图的样式,这个属性同navigationBarTextStyle属性一样目前仅支持两种颜色(dark和light).
• enablePullDownRefresh 这个属性是设置是否开启下拉刷新,默认是开启的,

tabBar

这个配置项是用来配置页面底部的tab栏的,开发者可以根据自己的需求来进行配置。

• color 设置tab上的文字默认颜色
• selectedColor 设置tab上的文字选中的颜色
• backgroundColor 设置tab的背景颜色

• borderStyle 设置边框的颜色,现在仅支持(black和white) 
   

networkTimeout

它是用来设置各种网络请求的超时时间的,单位是毫秒

app.js中有以下属性

Page()函数

• data  实现页面的初始化数据
• onLoad  是生命周期函数,用来监听页面加载,一个页面只会调用一次,它的参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的query.
• onReady  同样是生命周期函数,用来监听页面初次渲染完成,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互.对页面的设置请在onReady之后设置,如wx.setNavigationBarTitle.
• onShow  生命周期函数,用来监听页面显示,每次页面打开都会调用一次.
• onHide  生命周期函数,监听页面隐藏,当wx.navigateTo或者底部tab切换之后调用.
• onUpload 生命周期函数,用来监听页面卸载.当wx.navigateTo和navigateBack的时候调用.
• onPullDownRefresh  页面相关事件处理函数,用来监听用户的下拉动作.但是需要在config的window选项中开启enablePullDownRefresh,当数据刷新完成之后,可以用wx.stopPullDownRefresh停止当前页面的下拉刷新. 

setData()函数

接下来则是setData()函数,这个函数可以将数据从逻辑层发送到数据层,同时还可以改变this.data的值. 
setData()接受一个对象参数,让数据以key,value的形式表示将this.data中key对应的值改变成value. 

数据绑定 在上面我们已经说过了在Page()注册页面的时候，里面会有一个data属性来定义初始化数据，使用页面渲染的数据绑定的时候，就需要调用data里面的数据了。

条件渲染 通过条件来判断是否需要渲染该代码块。条件渲染主要是用到wx:if 。

列表渲染 – wx:for 
下面我们就说说wx:for的用法，wx:for绑定一个数组，就可使用数组中各项数据重复渲染该组件。

模版 
WXML提供模版(template),可以在模版中定义代码片段,然后在不同的地方调用。

引用部分

其中WXML引用方式常用import。

 

wxss部分

在WXSS中引入了新的 尺寸单位rpx 它规定1rpx=0.5px = 1物理像素 。