微信小程序开发知识点总结

原创 2017年02月19日 08:50:05

微信小程序开发知识点总结

微信小程序的目录结构

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。只可以配置successloading两种方式。在我们的项目中不实用。所以在我们的项目中使用自定义的方式。

使用方法:

在需要使用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++){
    //....
}
版权声明:本文为博主原创文章,未经博主允许不得转载。

[微信小程序]微信小程序知识总结及案例集锦

前言 今天把之前收集的微信小程序案例,给大家共享出来,一起学习!学习的别人东西是自己技能增长最快的一种方式. 就像之前我们在写程序时,主管或项目经理,经常提醒我们一样,程序写的太乱,不简洁,要多看...
  • BaiHuaXiu123
  • BaiHuaXiu123
  • 2016年12月01日 10:36
  • 23251

Android 知识点梳理,较完整

说明:本篇博客只是一个知识整理,因为网上对于Android的知识介绍足够多,因此我不再写相关文章(主要是因为我写的不如人家好),所以所有文章均来自网络,不贴原文章,只提供连接,因此本文旨在减少你对相关...
  • u011240877
  • u011240877
  • 2016年07月26日 13:25
  • 10436

微信小程序开发知识点总结

作者:zhiqiang21 ,来自原文地址  1.微信小程序的目录结构 1.外联公共样式的方法 根据微信的官方文档,是支持@import的方式一如外联的公共样式的 使用@import...
  • rolan1993
  • rolan1993
  • 2017年05月26日 15:18
  • 744

微信小程序开发常用知识点

收集了一些小程序开发中常用到的知识点,记录一下。(小程序开发文档版本不断在更新,可能有些以后用不了的,这些发现了再更新,也请各位道友指正) http://www.jianshu.com/p/df...
  • sinat_17775997
  • sinat_17775997
  • 2017年03月11日 19:30
  • 495

C++程序开发例题与习题(知识点+示例讲解)

  • 2009年10月14日 17:10
  • 6.21MB
  • 下载

Web应用程序开发知识点回顾

asp.net 1、 每一个.aspx文件都以Page指令开始。Page指令指定了页面所采用的语言,并且告诉ASP.NET从哪里可以找到关联的代码文件。 AutoEventWireup="true"以...
  • bigpudding24
  • bigpudding24
  • 2016年08月24日 16:34
  • 287

微信小程序开发系列——4.小程序视图页面基础知识

摘要:本文介绍了小程序的使用的前端语言,以及小程序开发过程中需要知道的页面基础知识。1. 介绍搭建后端服务器完毕以后,我们接下来准备小程序前端页面的基础知识。由于微信前后端是分离的,我们开发时一般可以...
  • u012848631
  • u012848631
  • 2017年07月03日 14:51
  • 580

[微信小程序]入门学习知识点_UI布局

[微信小程序]入门学习知识点_UI布局@Author GQ 2017年06月22日 一开始刚出小程序的时候还比较关注,由于资料和ide不太完善就没看, 现在准备开始学习入门.小程序入门学习笔记......
  • baidu_25797177
  • baidu_25797177
  • 2017年06月23日 10:43
  • 331

【腾讯Bugly干货分享】微信小程序开发思考总结——腾讯“信用卡还款”项目实践

本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/58212d0fa7a7574c4f4cc3c5 作者:peggy 小程序概述...
  • Tencent_Bugly
  • Tencent_Bugly
  • 2016年11月08日 09:48
  • 956

微信小程序开发总结

一、产品定位 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 二、小程序注册流程 1.在微信公众平台官网首页(mp.weixin.qq.co...
  • zramals
  • zramals
  • 2016年11月16日 11:31
  • 559
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:微信小程序开发知识点总结
举报原因:
原因补充:

(最多只允许输入30个字)