微信小程序开发前配置

微信小程序

这是嵌入在微信应用程序中的一个更小的应用程序。

属于:混合开发。

混合开发: 一处开发,多端应用。

前端分类

网站方向: 普通静态网站 、 网站APP

应用方向: 混合开发

一个公司,制作一个项目时,如果想要同时支持IOS系统和Android系统,需要招聘两套人马。成本比较高。此时,可以选择招聘一套前端人马。使用混合开发的方式,临时制作一个APP。它可以同时安装在安卓系统和苹果系统上。

混合开发有三种分类:

浏览器引擎渲染: 以 H5+为代表

更贴近原生API的react native: react native

微信小程序

注册

打开微信公众平台 注册账号, 选择账号类型为:小程序

打开下载页面,下载微信开发者工具。

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

这是一个微信提供的开发工具。能够测试开发效果。

安装过程:傻瓜式安装。

图片7.png

创建项目

扫码成功之后,会显示一个面板

图片8.png

在该面板中点击小程序项目选项,进入如下版面

图片9.png

点击确定,就会生成一个项目结构。我们就可以开始开发。

面板结构:

图片10.png

目录结构

页面文件夹

Pages文件夹: 这是一个文件夹,用于存放小程序要使用到的所有页面。 里面的每一个子文件夹代表一个页面。 每一个子文件夹中有四个文件。分别是 .js、.json、.wxml、.wxss

工具文件夹

Utils文件夹: 这是一个文件夹,用于存放所有的开发时使用到的JS模块。

注:以上两个文件夹的名字都不是固定的。

与这两个文件夹同级别的还有四个文件分别是: app.js、 app.json、 app.wxss、 project.config.json

应用程序构造器

app.js: 这是一个文件,用于定义应用程序的每一个生命周期。以及所需数据。

生命周期函数:

onLaunch 初始化的时候

onShow 从后台进入前台 或者是第一次出现的时候

onHide 从前台进入后台

onError 脚本错误的时候

应用程序配置文件

app.json: 用于配置应用程序的某些内容。比如,导航栏的标题文本、导航栏的颜色、背景颜色等。再比如,当前应用程序需要几个页面。当前应用程序有几个底部按钮。当前应用程序发送请求的超时时间等。

配置项: pages 是一个数组,用于确定当前小程序一共需要几个页面 每一个值都是某一个wxml的路径 可以利用该方式快速创建所需页面。

{
"pages": [
"pages/index/index"
]
}

配置项: window 是一个对象,用于确定小程序的窗口信息以及样式。

  "window": {
    "navigationBarBackgroundColor": "#ffffff",  // 导航条的背景颜色
    "navigationBarTextStyle": "black",  // 导航条的文本颜色
    "navigationBarTitleText": "爱创课堂",  // 导航条的文本内容
    "backgroundColor": "#eeeeee",  // 背景色
    "backgroundTextStyle": "light",  // 背景文本颜色
    "enablePullDownRefresh": false  // 是否允许下拉刷新

  }

配置项: tabBar 是一个对象,用于确定小程序的底部按钮信息。

  "tabBar": {
    "list": [{
      "pagePath": "pagePath", // 页面路径 这里的值必须从pages数组中选择 当点击该按钮的时候 跳转到的页面
      "text": "text",  // 文本
      "iconPath": "iconPath",  // 没被选中时的图标路径
      "selectedIconPath": "selectedIconPath"  // 被选中时的图标路径
    }]

  }

此时,会报错 因为只有一项![]()

配置项: networkTimeout

  "networkTimeout": {
    "request": 20000,
    "connectSocket": 20000,
    "uploadFile": 20000,
    "downloadFile": 20000
  }
全局样式文件

app.wxss: wxss就是微信样式 css是层叠样式。等价于Reset.css.它内部的样式,将会应用在每一个页面中

项目配置文件

project.config.js: 针对项目的配置

最后

作者每周都会发布不错的文章,供大家学习,欢迎大家关注。

微信搜索【前端每日技巧】关注公众号,写作不易,希望能点赞👍️加收藏❤️和转发。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

周帅帅Love

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值