文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序开发基本知识有哪些

2023-06-26 08:09

关注

本篇内容介绍了“微信小程序开发基本知识有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

基础知识

MINA 框架

为方便微信小程序开发,微信为小程序提供了 MINA 框架,这套框架集成了大量的原生组件以及 API。通过这套框架,我们可以方便快捷的完成相关的小程序开发工作。

MINA 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,因此我们主要聚焦于数据与逻辑上。

响应的数据绑定

框架的核心是一个响应的数据绑定系统。
整个系统分为两块:视图层(View)和逻辑层(App Service),
通过框架,可以让数据与视图保持同步变得很简单。当我们修改数据的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。
通过下面的例子来看:

<!-- This is our View --><view> Hello {{name}}! </view><button bindtap="onChangeName"> Click me! </button>
// This is our App Service.// Register a Page.Page({  data: 'Baixing',  onChangeName: function(e) {    // sent data change to view    this.setData({      name: 'MINA'    })  }})

以上通过框架将逻辑层数据中的 name 与视图层的 name 进行了绑定,所以在页面打开的时候会显示 "Hello Baixing!",
当点击按钮的时候,视图层会发送 onChangeName 的事件给逻辑层,逻辑层找到对应的事件处理函数。逻辑层执行了 setData() 的操作,将 name 从 Baixing 变为 MINA,因为该数据和视图层已经绑定了,从而视图层会自动改变为 "Hello MINA!" 。

页面管理

框架管理小程序的页面路由,可以做到页面间的无缝切换,并给以页面完整的生命周期。开发者需要做的只是将页面的数据、方法、生命周期函数注册进框架中,其他的一切复杂的操作都交由框架处理。

基础组件

框架提供了一套基础的组件,这些组件自带微信风格的样式以及特殊的逻辑,我们通过组合基础组件,就可以很方便的创建出强大的微信小程序。详情参考微信小程序组件文档。

丰富的 API

MINA 框架提供丰富的微信原生 API,可以方便地调起微信提供的能力,如获取用户信息,本地存储,支付功能等。

小程序目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成,必须放在项目的根目录下:

文件作用
app.js小程序启动入口文件
app.json小程序公共设置,如注册路由信息
app.wxss小程序公共样式表

一个小程序页面由四个文件组成,分别是:

文件作用
js页面的具体逻辑功能,如页面的分享等逻辑方法
wxml页面的结构,MINA 框架提供的各种组件便用于此
wxss页面样式表,类似 Web 开发的 CSS 文件,用于控制页面的具体显示样式
json页面配置,用以配置 MINA 框架提供的特有功能,如下拉刷新是否启用等配置信息

注意:以上的四个文件必须具有相同的路径和文件名。

小程序的运行机制

注意小程序是没有重启的概念的,主要的运行机制如下:

开发实践

讲了很多原理性的东西,如果没有实际实践的话,也只是一纸空谈。下面将以一个记账小程序作为开发实践,这个小程序用以记录每日花费以及具体花费说明。

在开始前,请下载小程序开发工具。

创建项目

这里因为没有申请 AppID,所以选择了无 AppID 开发模式。如果有要使用 AppID 进行开发,可通过微信小程序官网进行配置,这里就不细说,具体参考微信小程序官网文档说明。

我们填写好项目名称,选择项目目录后,点击添加项目,就进入所创建项目的开发界面,如下:

创建页面

我们的程序主要有两个页面,一个是展示所有记账记录的首页页面,一个是添加记账的页面。在开发工具编辑选项卡下,点击添加新建,输入要创建的文件就可以了。

在上面的(Pages)目录中,每个不同的页面目录下存在 4 种不同的文件格式。在基础知识部分,有讲解过不同格式具体的作用,这里不再赘述。接下来就进入实际的编码工作吧。

编写代码

1. 首页的具体功能包括:

页面主要逻辑代码如下:

import {  loadAllRecord,  deleteRecordById } from '../../services/tallyService.js'var app = getApp()Page({  data: {    userInfo: {},    list: [],    totalMoney: 0  },  ...  // 加载已存的每日花费记录,且统计总共花费的金额。  fetchData() {    wx.showLoading({      title: '加载数据中...',    })    var self = this    loadAllRecords((list) => {      var totalMoney = 0      list.forEach((item) => {        totalMoney += Number(item.money)      })       self.setData({list, totalMoney})      self.customerData.isFirstShow = false      setTimeout(() => {        wx.hideLoading()      }, 1000)    })  }  ...})

页面结构代码如下:

<!--index.wxml--><view class="container">  <view  bindtap="bindViewTap" class="userinfo"><image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image><view class="info-view">  <text class="userinfo-nickname">{{userInfo.nickName}}</text>  <text class="money-text">总花费:{{totalMoney}}元</text></view>  </view>  <view class="list-view"><block wx:for="{{list}}" wx:key="*this">  <view class="tally-cell"><text class="detail-text">{{item.detail}}</text><text class="money-text">{{item.money}}元</text><text class="time-text">{{item.time}}</text>  </view></block>  </view>  <navigator class="add-button" url="../record/record" open-type="navigate">记一笔</navigator></view>
2. 记录页面主要功能:

页面主要逻辑代码如下:

import {addNewRecord} from '../../services/tallyService.js'var app = getApp()Page({  ...  onSaveRecord() {    let record = {      money: this.customerData.money,       detail: this.customerData.detail    }    addNewRecord(record, (res)=>{      console.log(res)      wx.navigateBack({})    })  }})

页面结构代码如下:

<!--record.wxml--><view class="container record-view">  <view class="money-view">金额:    <input placeholder="请输入要记录的花费金额..."       bindblur="onMoneyBlured"       maxlength="10"       placeholder-style="font-size: 14px;"      confirm-type="done"       type="digit"       auto-focus      value="{{money}}"      bindinput="onMoneyChanged"/>  </view>  <view class="detail-view">花费记录:    <textarea class="detail-textarea"      placeholder-style="font-size: 14px;"      placeholder="请输入具体的花费详细吧..."      maxlength="160"      cursor-spacing="10"      bindinput="onDetailChanged"/>  </view>  <button class="save-button"     catchtap="onSaveRecord"     formType="submit"     disabled="{{ !canSave }}">保存  </button></view>
3. 记录 Dao 类

主要逻辑代码如下:

var records = []import {formatTime} from '../utils/util.js'function addNewRecord({money, detail}, callback) {  let id = records.length  let time = formatTime(new Date())  let record = {id, money, detail, time}  records.push(record)  if (typeof callback === 'function') {    callback(true)  }}function loadAllRecord(callback) {  if (typeof callback === 'function') {    callback(records)  }}module.exports = {  addNewRecord,  loadAllRecord}

“微信小程序开发基本知识有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯