微信小程序开发从0到1【原生开发者工具开发】【1】

428 阅读2分钟

头像.png 一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第1天,点击查看活动详情

🍋欢迎关注 🍋[微信小程序开发从0到1] 🍋共同努力

一 、 前言

不知不觉来到上海快一年了,当初初次来上海没怎么考虑就来到了现在这家公司。当初,胆子还是蛮大了。因为那时的我还是只会vue2的菜鸟。公司需要开发小程序,因公司的强烈要求否定了uniapp 、taro 的技术栈。技术选型为原生态的微信开发者工具。这时我顶着压力去边学边写,不负公司期望磕磕碰碰写出来我的第一款电商小程序。后续根据公司业务又开发了二款小程序如今都已经上线发布了。

本文讲解的是我开发这三款小程序的理解和总结。

  • 内容有出错的地方联系我更改或删除。
  • 因为是从0到1所以可能内容后续会很长,请见谅。
  • 本文不会讲些太难的东西,易于新接触小程序的人吸收及开发。

二 、 项目准备

因为从0 到1所以建议是刚开始先的小伙伴们最好先去看一下微信的开发文档,不求精通但求有个印象微信开放文档 、 创建自己的仓库Gitee.com、 申请企业账户微信公众平台 (qq.com)、 下载微信开发者工具稳定版 Stable Build

三 、 项目启航

创建项目

  1. 输入小程序名称
  2. 输入你的APPID 微信公众平台 (qq.com) 扫码进入点击左下角设置 基本设置最下面就是你的appid
  3. 选择不使用云开发
  4. 选择你需要的模板 我选择的javascript基础模板(对ts不熟悉不建议选择ts)

jj-01.png

四 、了解项目文件配置

项目初始文件夹

jj-02.png

项目初建需要掌握app.json文件

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light", (下拉 loading 的样式,仅支持 `dark` / `light`"navigationBarBackgroundColor": "#fff",(导航栏背景颜色)
    "navigationBarTitleText": "Weixin",(导航栏标题文字内容)
    "navigationBarTextStyle":"black"(导航栏标题颜色,仅支持 `black` / `white`)
  },
  "style": "v2",(启用新版的组件样式指定使用升级后的weui样式)根据自己的需求看是否删除
  "sitemapLocation": "sitemap.json"(指明 sitemap.json 的位置)
}