微信小程序开发之路(二)

简介: 由于前段时间比较忙,已经有半个多月没有更新文章了。最近微信小程序频繁更新,越来越开放,所以今天我们将继续探讨小程序。在微信小程序开发之路(一)中讲到微信小程序的单向绑定以及使用setData()方法来更新View,这对于新手也算是个“坑”了,很容易出错。

由于前段时间比较忙,已经有半个多月没有更新文章了。最近微信小程序频繁更新,越来越开放,所以今天我们将继续探讨小程序。

微信小程序开发之路(一)中讲到微信小程序的单向绑定以及使用setData()方法来更新View,这对于新手也算是个“坑”了,很容易出错。下面将继续分享我在开发小程序过程中所遇到的“坑”。

一、onLaunch方法只能在app.js中的App()中定义

这个其实熟悉文档的话就很好理解了,onLaunch方法只在小程序初始化完成时触发,全局只触发一次,所以在页面的Page()中写这玩意儿是无效的,当然也不会报错,这才导致新手容易犯错。

二、局部js文件若要调用app.js中的方法或获取其中的数据,可通过getApp()的方式来获取

首先需要强调的是,app.js虽然说可以定义全局方法或数据,但是在局部js文件中却无法直接调用。其次还需注意的是,在app.js中的全局方法必须要在App()中定义,否则无法在局部调用。简单举个栗子吧~~~

//app.js
App({
    b(){
        console.log("b");
    },
    globalData:{
        ccc: 'ccc'
    }
})

function a(){
    console.log('a');
}
//pages/test/test.js
var app = getApp();
Page({
  data:{},
  onLoad:function(options){
    // a();     // 报错
    // app.a();     // 报错
    app.b();     // b
    console.log(app.globalData.ccc);    // ccc
  }
})

其实这样也不难理解,我们通过getApp方法可以直接获取小程序实例,然后就能很开心的调用和获取App()中定义的方法和数据咯~~

三、若项目中需要使用登录接口wx.login(),在使用微信开发工具建项目时须填入AppID

四、支持JSON.stringigy()和JSON.parse()这两个方法,但需要注意的是,使用JSON.parse()时传入的参数必须是标准的JSON格式的字符串

刚开始以为小程序不支持JSON.parse()方法,因为在实际用的时候报错了,后来才发现原来是自己JS技术不过关。在使用该方法时,要特别注意传入的参数格式,举个例子:

// pages/test/test.js
var app = getApp();
Page({
  data:{},
  onLoad:function(options){
    console.log(JSON.stringify({aaa: 111}));   //  这个方法倒是可以传入普通的JS对象字面量,返回{"aaa":111},这是个字符串
    console.log(JSON.parse('{"aaa": 111}'));     //  标准的JSON格式的字符串,返回{aaa: 111},这是个对象
    // console.log(JSON.parse("{'aaa': 111}"));    //  报错
    // console.log(JSON.parse("{aaa: 111}"));      //  报错
  }
})

其实就是考验对这两个JS方法的掌握,跟小程序没啥关系,对这两个方法特别熟悉的可以直接跳过。

结束语:其实不管学什么,都不能仅仅只停留在理论,否则理论再好你也不一定掌握,学习的精髓其实在于多看、多练和多写。比如你看完本文,或许你觉得某个地方可能不太正确,这时候你就可以自己写个Demo试一试,最后你可能觉得这个知识点很好可又担心记不住,这时候你就应该把它写下来。今天就先分享到这里,后续会继续分享更多关于小程序的干货哦~~

相关文章
|
19天前
|
小程序 JavaScript
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
本文介绍了使用 Taro 和 Vue 创建轮播组件的两种方法:一是通过 `<swiper>` 实现,二是利用 Nut UI 的 `<nut-swiper>` 组件实现。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
|
5天前
|
存储 移动开发 监控
微信支付开发避坑指南
【9月更文挑战第11天】在进行微信支付开发时,需遵循官方文档,确保权限和参数配置正确。开发中应注重安全,验证用户输入,合理安排接口调用顺序,并处理异常。上线后需实时监控支付状态,定期检查配置,关注安全更新,确保系统稳定运行。
|
11天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
30 3
|
19天前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
本文介绍了Taro中`useShareAppMessage`的使用方法,需在页面配置`enableShareAppMessage: true`并重新编译。
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
|
19天前
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
|
19天前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
本文介绍如何在Taro项目中使用Nut UI的`<nut-uploader/>`组件实现图片上传功能,并通过示例代码展示了自定义上传逻辑的方法。
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
|
19天前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
本文介绍如何在Taro项目中配置深色模式。通过在`src/app.config.ts`设置`darkmode`选项和在`theme.json`中定义主题变量,可以实现跟随系统主题的界面风格切换。
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
|
10天前
|
小程序 前端开发 JavaScript
开发支付宝小程序的思路
【9月更文挑战第7天】本文介绍了一种在支付宝小程序中实现网页抓取的方法,通过云函数或自建后端服务来解析外部网页的标题、描述和图片。具体步骤包括:用户输入链接,小程序调用云函数抓取并解析网页内容,最后将结果返回并在前端展示。文中详细介绍了使用 Node.js 的云函数实现过程,包括代码示例和小程序前端页面的实现方法。通过这种方式,可以显著提升链接分享的用户体验。
22 0
|
26天前
|
小程序 JavaScript Java
微信小程序的后端开发需要使用什么语言?
【8月更文挑战第22天】微信小程序的后端开发需要使用什么语言?
249 65
|
19天前
|
小程序 开发者
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
本文介绍了如何在Taro项目中实现自定义tabBar。首先,在`app.config.ts`中设置`custom: true`并配置`tabBar`。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar

热门文章

最新文章