微信小程序开发中常见的技术点梳理

配置

全局配置、页面配置和sitemap配

全局配置选项app.json

{//在json文件中其实是不能有注释的，这里我简单做一些解释"pages": [   //pages为页面路径列表"pages/home/home","pages/kind/kind","pages/cart/cart","pages/user/user","pages/detail/detail","pages/map/map"],"window": {   //window为全局的默认窗口表现"navigationBarBackgroundColor": "#f66","navigationBarTextStyle": "white","navigationBarTitleText": "world商城","backgroundColor": "#efefef","backgroundTextStyle": "dark","backgroundColorTop": "#0f0","onReachBottomDistance": 50},"tabBar": {    //tabBar为底部tab导航栏表现"color": "#333","selectedColor": "#f66","backgroundColor": "#efefef","borderStyle": "white","list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "/resources/home.png","selectedIconPath": "/resources/home_active.png"},{"pagePath": "pages/kind/kind","text": "商品分类","iconPath": "/resources/kind.png","selectedIconPath": "/resources/kind_active.png"},{"pagePath": "pages/cart/cart","text": "购物车","iconPath": "/resources/cart.png","selectedIconPath": "/resources/cart_active.png"},{"pagePath": "pages/user/user","text": "个人中心","iconPath": "/resources/user.png","selectedIconPath": "/resources/user_active.png"}]},"networkTimeout": {  //网络请求超时"request": 6000,"connectSocket": 5000,"uploadFile": 4000,"downloadFile": 5000},"permission": {    //小程序接口权限相关设置"scope.userLocation": {"desc": "小程序位置信息展示"}},"navigateToMiniProgramAppIdList": [   //需要跳转的小程序列表"wx5dfe0dd624d5ae6b"],"sitemapLocation": "sitemap.json"   //指明 sitemap.json 的位置
}

页面配置选项

{"navigationBarBackgroundColor": "#ff4001","navigationBarTextStyle": "white","navigationBarTitleText": "商城-首页","backgroundColor": "#efefef","backgroundTextStyle": "light","enablePullDownRefresh": true,"onReachBottomDistance": 50,"disableScroll": false,"usingComponents": {"prolist": "/components/prolist/prolist"}
}

sitemap配置选项

{"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html","rules": [{"action": "allow","page": "*"}]
}

wx.request网络请求封装

const baseURL = '自己的基础的接口地址'export default function (options) {
//当在请求数据时，显示加载中的loading效果wx.showLoading({title: '加载中',})return new Promise((resolve, reject) => {wx.request({url: baseURL + options.url,method: options.method || "GET",data: options.data || {},success: resolve,fail: reject,complete: () => {//当请求完成时（不管是请求成功，还是失败）都要隐藏消息提示框wx.hideLoading()}})})
}

路由跳转方式

声明式导航

<navigator url="/pages/···/···?id=' + id"  open-type=" "></navigator>
open-type navigate 保留当前页面，新添加一个页面，不能新添加tab页面 ---- pushredirect 替换当前页面，不能替换tab页面  ---- replaceswitchTab 切换当前的tab页面 ---  小程序独属navigateBack 返回  ----  back  goBack

编程式导航

//通过点击事件触发wx.navgatorTo()方法
handlePush  () {wx.navgatorTo({//通过两种方法都可以url= '/pages/xxx/xxx?id=' + id url=`/pages/xxx/xxx?id=${id}`})
}

微信小程序开发中常见的技术点梳理相关推荐

微信小程序开发中常见问题及解决方法
本文章总结小程序开发中常见的错误问题.希望能帮助初学者少走弯路,避免类似的错误. 1:出现"脚本错误或者未正确调用Page()"的错误提示. 解决方法:出现这个错误的原因通常是因为 ...
关于微信小程序开发中遇到的缺少game.json问题的解决
关于微信小程序开发中遇到的缺少game.json问题的解决参考文章: (1)关于微信小程序开发中遇到的缺少game.json问题的解决 (2)https://www.cnblogs.com/ygxd ...
解决微信小程序开发中wxss中不能用本地图片
微信小程序开发中wxss中不能用本地图片,我们可以用将我们的图片传到服务器上,然后直接引用在线地址.但是当我们没有服务器时,我们可以用"图床",这个具体可以百度.这里我们用第二种方 ...
java写微信小程序答辩问题_微信小程序开发中遇到问题总结
微信小程序开发中遇到问题总结 1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app.js的全局数据时,无法按顺序加载.例: //app.js App({ ...
java写微信小程序答辩问题_java微信小程序开发中加密解密算法总结
详解java微信小程序开发中加密解密算法一.概述微信推出了小程序,很多公司的客户端应用不仅具有了APP.H5.还接入了小程序开发.但是,小程序中竟然没有提供Java版本的加密数据解密算法.这着实让 ...
微信小程序开发中的二三事之网易云信IMSDK DEMO
本文由作者邹永胜授权网易云社区发布. 简介为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...
微信小程序页面栈_微信小程序开发中的页面栈及页面路由原理
摘要:小程序的开发方兴未艾,本文以图解的形式详细剖析了小程序开发中的页面栈及页面路由原理,对于该原理的深入理解有助于开发者更好地理解小程序的开发框架,更好地开发出功能强大的小程序. 微信小程序(以下简 ...
微信小程序开发中遇到的一些问题
1.关于Promise对象的打印上面一个是高版本的基础库打印,下面一个是低版本的基础库打印 2.小程序打开项目控制台警告:VM745:1 [Event] 11 listeners of event ...
微信小程序开发中如何实现侧边栏的滑动效果？
原文链接:https://mp.weixin.qq.com/s/7CM18izpZqf0oc0D75IGmQ 1 概述在手机应用的开发中侧边栏滑动是很常见的功能,当然在小程序中也不会例外,很多特效还 ...

微信小程序开发中常见的技术点梳理

配置

wx.request网络请求封装

路由跳转方式

微信小程序开发中常见的技术点梳理相关推荐

最新文章

热门文章