微信小程序开发知识点总结
微信小程序开发知识点总结
微信小程序的目录结构
1.外联公共样式的方法
根据微信的官方文档,是支持@import
的方式一如外联的公共样式的
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html
但是在实际的开发过程中如果通过@import '../../common.wxss'
的方式引入外联的公共样式common.wxss
却是不生效的。如果是引用文件和被引用文件在相同的目录下是生效的。即@import 'common.wxss'
的方式
那么怎么管理我们的公共样式呢?根据官方文档。在根目录的app.wxss
中定义的样式在所有页面中都生效。
所以我们的wechat-sdk
的公共样式都是在根目录的app.wxss
中定义的。
2.关于toast
提示
微信小程序的 API 默认是支持toast的。 但是wx.showToast(OBJECT)
方法的弹层却是默认带有一个icon
。只可以配置success
和loading
两种方式。在我们的项目中不实用。所以在我们的项目中使用自定义的方式。
使用方法:
在需要使用toast的wxml
中添加下面一段代码(因为是fixed
定位可以放在任意位置,一般放在页面最底部):
<view style="display:{{toast?'block':''}}" class="bd-toast">{{toasttxt}}</view>
在对应的.js
文件中通过import
的方式引入toast方法
import { toastFn } from '../../utils/toastFn';
在需要弹层的地方直接调用就可以了
/***@ _this 指向当前的page对象*@text toas中显示的文案*/
toastFn(_this,[text]);
3.使用ES6开发提升开发效率
小程序是默认支持ES6语法的,而且在上传代码的时候会自动把ES6编译为ES5。
在第二小节中使用import
的方式引入toastFn
就是使用ES6的import
那么使用它有什么好处呢?好处之一就是不用引入第三方库就可以实现代码模块化。
比如我在目录requestapi
主要定义的是关于接口请求的代码块。在 utils
中定义的是功能代码块。在需要他们的地方直接通过 import
的方式引入就可以直接使用。import
可以把代码做很好的隔离。
4.config.js
配置文件的使用
为了便于线下联调和测试。把依赖环境的项通过配置文件的方式管理起来。在需要的地方直接import
来引用。如果需要上线的话只需要在这一个文件中打开相应的注释和关闭相应的注释就可以了。
//qatestc测试环境域名
export const hostName='https://wappass.qatest.baidu.com/';//线上环境域名
// export let hostName='https://wappass.baidu.com/';//产品线配置验证成功后跳转的url
export const jumpProductUrl = '/testsuccess/testsuccess';//产品线配置的tpl
export const tpl = 'waimai';//是否开启debug模式
export const DEBUG=false;
比如说接口的请求都是通过以下的方式来写,达到统一管理测试环境和线上环境的目的:
import {hostName} from '../config';wx.request({//接口请求url: hostName+'wp/api/security/checkvcode',data: {verifycode: vcode,codestring: _this.data.imgcode},method: 'GET',header: {'content-type': 'application/x-www-form-urlencoded'},success: function (res) {}})
5.怎么获取表单的数据
因为小程序的开发思想是借鉴 Vue.js 这类MVVM框架的数据绑定的思想。我们是没办法直接操作所谓的“DOM”的。那我们怎么获取页面的数据或者是更新页面上的数据呢?下面介绍下数据绑定的思想
比如页面上有下面这样的一个input
输入框。
<input type="number" bindinput="phoneInput" maxlength="13" class="bd-phonenum" placeholder="请输入手机号(无需注册)" value="{{inputValue}}" />
Page({data:{inputValue:'input的默认值' //wxml中会把使用{{inputValue}}的地方的值和这里绑定起来},phoneInput:function(e){let value = e.detail.value;//获取输入框的值},updatePageData:function(){//这里是去更新页面中input 中的值this.setData({inputValue:'更新的值' //会更新页面中绑定了{{inputValue}}的节点})}
})
从上面的代码可以了解到为什么基于数据绑定的类MVVM框架火起来的原因。前端一直再谈就是操作DOM影响页面性能。要尽量少的操作DOM。而上面的代码在没有操作的DOM的情况下就完成了获取页面上的数据和更新页面的数据。而且代码更加的简洁。
6.mock.js能否在微信小程序中使用
mock.js
因为能够拦截ajax
请求,然后返回特定格式的数据。而被广泛的应用于前后端分离的开发模式中。那么在微信小程中是否可以使用mock.js
呢?
答案是否定的。因为微信小程序中的所有接口请求都必须经过客户端转发并不是原生的ajax
请求。但是可以借助mock.js
的思想封装一个根据特定的url返回特定数据的方法。在config.js
中配置变量DEBUG
是否开启调试模式。
然后再apiAjax.js
中配置,如下图
import * as Mock from '../mock/mock';const apiAjax = (api, dataMethod, method = 'POST', fnSucc, thisData) => {if (!DEBUG) {wxRequestApi(api, dataMethod, method = 'POST', fnSucc, thisData);} else {/*** 模拟数据可以在这里配置switch 的方式* case 的条件判断语句即为要请求的接口*/switch (api) {case hostName + '/wp/api/security/getphonestatus':fnSucc(Mock.testApi(api), thisData);break;default:wxRequestApi(api, dataMethod, method = 'POST', fnSucc, thisData);}}
}
所有关于特定接口的返回数据都是在mock/mock.js
中进行配置,配置方式可以参考配置示例:
/*** 测试接口返回数据样式** @returns*/
const testApi = ()=>{return {a:1,b:2}
}/*** 这里导出相应模拟数据的函数名*/
export {testApi
}
7.最后就是关于第三方库的使用了
开发过程中需要使用RSA
加密。我在微信小程序中引入了我们线上项目的RSA
加密算法源文件。但是却不能够正常运行。尝试建立测试的html
页面加入该加密算法文件。代码可以正常运行。使用node test.js
运行js文件也能够正常运行。但在微信小程序中就是不能够正常运行。
在花费了大约有3个多小时的时候后还是找到了问题的原因。问题的原因也很简单:微信小程序会把js文件默认按照"use strict"
运行。而RSA
加密算法的源文件并没有使用"use strict"
。
看下面的两段代码,如果不加头部的"use strict"
声明。两段代码都是可以正常运行。如果运行在"use strict"
的声明下就会报错。之所以花了很长时间解决这个问题,也就是看到这样的错误的时候,根本就没有往这方面考虑,因为他们看起来确实是正常的。
"use strict"
for(i=0;i<10;i++){//i is not defined//....
}for(var i=0;i<10;i++){//....
}
微信小程序开发知识点总结相关推荐
- api 定位 微信小程序 精度_微信小程序开发知识点集锦
一 小程序的生命周期 代码生命周期就是一个对象的生老病死,通常指程序从创建.开始.暂停.唤起.停止.卸载的过程.小程序的生命周期又可分为应用生命周期和页面的生命周期,先单独分析,在结合两者分析 应用生 ...
- 微信小程序开发知识点
/*** pages页面组成* -- .js..json..wxml..wxss* * app.json: 全局配置* * WXML: 小程序的标签语言,用来构建小程序的UI结构,类似于HTML但是和 ...
- 微信小程序开发【知识点大全】
微信小程序开发重点 知识点 token appid openid AppSecret 快捷键 知识点 token 有些接口是可以公开访问的,有些是不允许公开访问的,所以要设置token进行区分验证. ...
- 微信小程序开发必备知识点
微信小程序开发基础 文章目录 前言 一.页面组件(WXML) 二.小程序配置(json) 1. 全局配置 2. 页面配置 3. sitemap 配置 三.小程序配置(WXSS) 四.逻辑层(js) 1 ...
- 微信小程序开发,基础知识点汇总详解
目录 一.目录中文件说明 1.app.js文件 2.project.config.json文件 3.sitemap.json文件 4.页面中的.json文件 5.如何创建小程序页面 二.微信中代码的格 ...
- 微信小程序开发视频教程新鲜出炉
微信小程序开发公测了,可是对于新手来说,不同的框架不同的开发机制,如何快速适应呢?微信小程序开发视频教程新鲜出炉了,从零开始一步一步搭建微信小程序,每个章节都会涉及到不同的知识点,等教程学习完你不但掌 ...
- 微信小程序开发系列五:微信小程序中如何响应用户输入事件
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发之路(二)
由于前段时间比较忙,已经有半个多月没有更新文章了.最近微信小程序频繁更新,越来越开放,所以今天我们将继续探讨小程序. 在微信小程序开发之路(一)中讲到微信小程序的单向绑定以及使用setData()方法 ...
- 微信小程序开发笔记,你收藏了吗?
** 微信小程序开发笔记,你收藏了吗? ** 最近在开发微信小程序,把自己在项目中经常遇到的知识点记录下来,以便下次开发的时候查看. 开发小程序开发工具推荐vscode写代码,微信开发工具用于查看效果 ...
最新文章
- open ai gpt_您实际上想尝试的GPT-3 AI发明鸡尾酒
- AGC044E Pandom Pawn(期望+凸包)
- HashMap和ConcurrentHashMap的区别,HashMap的底层源码。
- vue.js框架的生命周期:常用钩子函数
- python vlookup 模糊_如何用python写excel中的vlookup函数?
- HTML 和 JavaScript 编程
- python有几种容器_Python中几种内置的容器(Containers)类型:列表、字典、集合和元组的比较和该注意的点...
- 基于遥感图像的船舶目标识别技术
- jenkins, docker-composer
- mysql engine类型 小项目_项目中常用的19条MySQL优化
- mysql删完数据表空间没释放_mysql删除表后,空间一直不释放
- 计算机一级b考试理论知识,计算机等级考试一级B基础知识精选考点串讲
- Quartus II 使用详解
- fastposter v2.6.2 发布 程序员专属海报生成器
- 中国医药电子商务平台行业十四五盈利规模与运营前景分析报告2022年
- 塔望食业洞察|中国有机食品市场研究与发展策略思考
- 从视网膜到视皮层——视觉系统知多少
- 利用白加黑配合Veil过杀软
- 目标检测到目标跟踪 -- Faster R-CNN 观测器
- 扫码登陆真的安全吗?
热门文章
- Java面试题大全(2020版)
- mkdir: cannot create directory ‘.ssh’: Permission denied
- Path In Zigzag Labelled Binary Tree(C++二叉树寻路)
- [深度学习][原创]使用labelImg+yolov5完成所有slowfast时空动作检测项目-开山篇
- 数据分析常用分析方法
- Coremail2021邮件安全竞赛正式开幕!快来报名吧!
- 黎曼猜想有可能证明哥德巴赫猜想
- NES专题——NES的游戏硬件
- 显卡Memory Clock上限问题排查实践
- 【目录】王爽《汇编语言》