WeChat小程序开发（五、前端总结）

绿源發表於 2020-7-19 17:08:00

WeChat小程序开发（五、前端总结）

<div style="margin: 3%; font-size: 1.2em; font-family: "幼圆"; text-decoration: none">
关于前端的知识，如果讲的稍微细一点，即使是总结性的分享也会有不少的知识点，况且我的实战经验不多，在微信小程序方面作为有一点基础的初学者也学了一周的时间，我打算下一周开始进行后端开发的学习，八月开始进行项目实战。所以这个随笔也是一周的总结的知识分享，如果有不正确不合理的地方，希望大家指出。
 
对于一款微信小程序，必然涉及前端和后端部分，前端设计界面效果和一定的逻辑应用，后端则是有关数据库管理，对前端的接口函数等处理。微信对后端的开发提供了简易版的云开发，只需要掌握JavaScript就可以实现后端的一些功能，但是微信的云开发局限性很大，不适合稍微大一点，自由度广一点的程序。
 
新建一个新的小程序，根据目录上的文件可以分为全局配置文件（app.js,app.json,app.wxss,project.config.json等）和页面配置文件(pages文件夹下的文件)
 
这里主要有四类型的文件，分别是json,js,wxml,和wxss文件。
json文件管理的主要是窗口的一些熟悉，而app.json里还包括tarbar导航条，页面目录的管理。这里注意，不在app.json注册过页面目录的页面无法进行调用。并且这里的不同页面的目录顺序默认决定进入小程序后进入页面的顺序。
 
wxss文件是全局的页面样式渲染文件，但是当页面的局部样式文件中有属性值相互冲突，则局部样式文件里的属性值优先。
 
对于一张页面，有它的渲染文件和逻辑文件，wxml和wxss组合主要实现页面的组件实现，总体布局和渲染效果，而js文件则处理逻辑方面。
 
我们刚启动一个小程序，最开始执行的是在app.js文件里的 App() 函数(小程序的注册)，App函数的基本结构如下：
<div class="cnblogs_code">
<pre>App({
onLaunch: function () {
// 登录
 wx.login({

})
// 获取用户信息
 wx.getSetting({

})
},
globalData: {

}
})</pre>
</div>
 
这里有个关键的原生函数： onLaunch() 。第一次打开小程序（之前小程序并不在后台），则执行onLauch()函数，这里一般会有一些获取用户授权并调用API接口连接后端获取openid等操作。
其他的具体在设计生命周期时具体再讲。
App()中也有全局变量globalData，在其他页面中调用全局变量可在js上使用 const app=getApp() 来实现。
 
当调用具体页面地址时，我们在逻辑层首先进入的是Page()函数，Page()的基本结构如下：
<div class="cnblogs_code">
<pre>Page({

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

},

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

},

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

},

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

},

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

},

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

},

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

},

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

},

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

}
})</pre>
</div>
 
 
接下来讲一下小程序的生命周期函数。首先关于小程序的每一张page的数据结构是按照栈的方式存储，即只能在栈顶进行相应的增加和删除操作。而对应有相应的生命周期函数：
 onLaunch() 当第一次进入app/第一次进入一张page时会执行的函数。
 onShow() 当小程序从后台转到前台时执行。
 onHide() 当页面从前台转到后台时执行。
 onError() 当出现错误时执行
等等还有很多生命周期函数。
 
进入一张页面执行该页的onLaunch()时：入栈
页面重定向：出栈
页面返回：出栈
tarbar切换：页面全部出栈，只有新的（入栈的）tab页面
重新加载：页面全部出栈，只有新的页面。
 
接下来先分析js文件中的几个常用的函数：
 
有关页面调用：
 wx.navigateTo() 跳转到某一页面（入栈操作），但这页面不可以是tabbar页面
 wx.redirectTo() 关闭当前页面到另一页面（先出栈再入栈），同样不可是tabbar页面
 wx.switchTab() 跳转到tabbar页面，且只能跳转到tabbar页面
 wx.relaunch() 可以跳转到任意页面。
 
具体代码可参考：
<div class="cnblogs_code">
<pre> wx.navigateTo({
 url: 'url',
})</pre>
</div>
 
注：在wxml文件中也可以使用组件navigate来进行页面的跳转。
 
 this.setData() 更新Data中具体某数据的值。
 console.log() 将某值或某变量呈现在console控制台中，利于实时观察和调试。
 
设计后端的常用API：
 wx.request() 向后端提出请求，对后端的具体接口地址(url)，传入相关请求（data）,成功则获得相应数据（一般存进res中）并返回success,失败则返回fail。
具体代码参考：
<div class="cnblogs_code">
<pre> wx.request({
url: 'url',
data:{

},
success(res){

},
fail(){

}
})</pre>
</div>
 
 wx.uploadFile() 上传文件
 wx.downloadFile() 下载文件
 
 wx.setStrogaeSync(‘key’,'value’) 将数据value存入缓存中，关键字为key。
 wx.getStrogaeSync(‘key’) 获得key对应的value。
 
现在分析wxml文件的相关组件和对应属性。
 
如果要在wxml中实现逻辑判断来决定是否呈现某个组件则用到属性： wx:if=“{{true/false}}” ，这里，双括号中的变量值是在js文件中data里定义过的变量值，也可以是一个表达式，只要结构是true,则执行这个组件，要不然，则不呈现这个组件。
 
具体的代码参考如下：
<div class="cnblogs_code">
<pre><view wx:for="{{arrayx}}">
<view wx:if="{{arrayx>5}}">
3
</view>
<view wx:elif="{{arrayx>3&&arrayx<=5}}">
2
</view>
<view wx:else="{{arrayx>0&&arrayx<=3}}">
1
</view>
</view></pre>
</div>
这里还运用了for循环控制。
 
还有其他控制属性比如for循环等，这里就不加累述，都是比较轻松易懂的代码。
 
关于wxml里的具体知识都是比较基础的容易掌握的知识，但是却比较多样，所以我就不加累述了，具体可在网上搜索或查看b站或mooc上的一些教程视频。
 
我的前端学习暂告一段落，并不是说我已经精通前端或没必要再学，我之后将在实践开发中更好的掌握前端相关知识，只是我发现无法先完成小程序的前端再实现小程序的后端，它们应该是并发执行的，所以我得快速了解后端的知识并且学习，而今天的学习随笔本来是想做有关后端初学的知识分享的，但是我查了几个小时的资料也有点徘徊不定，感觉后端是一个比前端艰难很多的道路。欸~加油吧。
 本次随笔是基于MOOC平台西安交通大学的微信小程序开发这门课程进行的总结。
</div> 
来源：https://www.cnblogs.com/SixteenTime/p/13340420.html

頁: [1]

琼殿技术论坛's Archiver

WeChat小程序开发（五、前端总结）