微信小程序项目技术点整理

停工不停学 逆战中成长

小程序的配置分为:全局配置、页面配置和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": "橘子商城",
    "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": [	//需要跳转的小程序列表
    "wx5dfe0dd623d5ae6b"
  ],
  "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页面 ---- push
    redirect 替换当前页面,不能替换tab页面  ---- replace
    switchTab 切换当前的tab页面 ---  小程序独属
    navigateBack 返回  ----  back  goBack
编程式导航
//通过点击事件触发wx.navgatorTo()方法
handlePush  () {
  wx.navgatorTo({
    //通过两种方法都可以
    url= '/pages/xxx/xxx?id=' + id 
    url=`/pages/xxx/xxx?id=${id}`
  })
}
食谱微信小程序项目的主要技术特征和创新包括以下几个方面: 1. 前后端分离架构:采用前后端分离的架构,前端使用Vue.js进行开发,后端使用Node.js和MongoDB进行数据存储和管理。这样可以实现前后端的解耦,提高系统的灵活性和可维护性。 2. 数据采集与清洗:通过网络爬虫技术,从各大食谱网站爬取菜谱数据,并进行清洗和整理。这样可以快速获取大量的菜谱数据,并保证数据的质量和一致性。 3. 智能搜索和推荐:通过引入智能搜索和推荐算法,为用户提供更精准的搜索结果和个性化的推荐菜谱。根据用户的搜索历史、喜好和营养需求等信息,推荐适合用户的菜谱。 4. 用户交互体验优化:注重用户体验,采用简洁明了的界面设计,方便用户快速浏览和搜索菜谱。同时,通过引入图片和视频等多媒体元素,提高用户对菜谱的直观理解。 5. 社交分享功能:为用户提供菜谱的社交分享功能,用户可以将自己制作的菜谱分享到微信朋友圈或发送给好友,增用户之间的互动和交流。 6. 数据存储与管理:使用MongoDB数据库存储菜谱数据,并建立索引以提高查询效率。同时,通过合理的数据模型设计和数据缓存策略,提高系统的性能和可扩展性。 7. 多平台适配:针对不同的设备和屏幕大小,进行适配和优化,确保在不同平台上的用户体验一致性。 总之,食谱微信小程序项目通过采用前后端分离架构、智能搜索和推荐、用户交互体验优化等技术特征和创新,提供了丰富的菜谱资源和个性化的服务,满足用户对健康饮食的需求,并提升了用户的使用体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值