微信小程序开发纪实

第一天
- 开发背景
- 注册测试号，小程序号
- 页面跳转、登陆拦截
- 文件目录结构
- 题外技能

本人第一次尝试开发微信小程序，打算写一篇博客文章，尽可能的详细的把开发过程中的难点、思路、面向百度编程的内容记录下来，供作参考。

第一天

开发背景

和另一名新入职的同事一起参与开发。我负责前端微信小程序，后端他用他自己擅长的lua语言（正常java、springboot系列或jsp-servlet系列都可以实现），中间通过json传数据。

已完成的项目链接
https://gitee.com/lyuhuyuteru/weixin/tree/master/%E6%8E%A5%E9%BE%99%E7%AE%A1%E7%90%86%E5%B0%8F%E7%A8%8B%E5%BA%8F

注册测试号，小程序号

https://mp.weixin.qq.com/
打开微信公众平台官网，找到小程序点进去注册

下载开发工具，作者写文章时版本是1.03.2010240

可以在开发管理中看到AppID与AppSecret

安装完成后打开程序

打开后新建项目，AppID可以填之前注册的，也可以使用测试号，云开发功能用不用无所谓

页面跳转、登陆拦截

点击进入新建的项目，app.js(这个文件是程序公共的部分)，index(这个是首页)

新建loginPage登录界面，右键新建文件夹，在文件夹下新建页面loginPage，会自动生成四个文件分别是wxml、wxss、js、json

打开app.js，在图示位置加入代码

代码就是当用户未登录时，让页面跳转到登录界面

在app.Json页面中检查是否声明页面

主页wxml代码

Js代码

Css代码

Json代码

将components组件导入

将主页的图标导入

主页代码

文件目录结构

│  app.js
│  app.json
│  app.wxss
│  project.config.json
│  sitemap.json
│
├─components
│  ├─cell
│  │      cell.js
│  │      cell.json
│  │      cell.wxml
│  │      cell.wxss
│  │
│  ├─cells
│  │      cells.js
│  │      cells.json
│  │      cells.wxml
│  │      cells.wxss
│  │
│  ├─icon
│  │      icon.js
│  │      icon.json
│  │      icon.wxml
│  │      icon.wxss
│  │
│  ├─import
│  │  │  base64.js
│  │  │  common.wxss
│  │  │  CustomPage.js
│  │  │
│  │  └─behaviors
│  │          theme.js
│  │
│  └─weui-wxss
│      └─dist
│          └─style
│              │  weui.wxss
│              │
│              └─icon
│                      weui-icon.wxss
│
├─images
│      icon_nav_feedback.png
│      icon_nav_form.png
│      icon_nav_special.png
│      icon_nav_z-index.png
│      jielong.jpg
│      tabbar_icon_chat_active.png
│      tabbar_icon_setting_active.png
│
├─pages
│  ├─icons
│  │      icons.js
│  │      icons.json
│  │      icons.wxml
│  │      icons.wxss
│  │
│  ├─index
│  │      index.js
│  │      index.json
│  │      index.wxml
│  │      index.wxss
│  │
│  ├─loginPage
│  │      loginPage.js
│  │      loginPage.json
│  │      loginPage.wxml
│  │      loginPage.wxss
│  │
│  └─logs
│          logs.js
│          logs.json
│          logs.wxml
│          logs.wxss
│
└─utilsutil.js

效果

题外技能

调试过程中要不断授权，可以通过设置取消授权

调试json
通过nodejs的json-server可以模拟调试json格式
从而达到前后端分离程序
详细操作下文链接学习
https://blog.csdn.net/weixin_44612322/article/details/102960647

json样例

{"data": [{"username": "ldh","password": "123"}]
}

svg转换
获得svg的标签代码

新建txt后重命名svg后缀

浏览器打开就可以查看png了

微信小程序开发纪实-菜鸟新手入门相关推荐

微信小程序开发（四）入门之打卡功能开发
相关文章微信小程序开发(一)微信开发者工具以及小程序框架介绍微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言本篇文章将介绍打卡小程序打卡页面相关功能的 ...
微信小程序开发（三）入门之创建打卡活动
相关文章微信小程序开发(一)微信开发者工具以及小程序框架介绍微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(四)入门之打卡功能开发前言上篇介绍了日历打卡小程序发现页视图相关开发 ...
微信小程序开发手账从入门到部署【持续更新】
微信小程序开发手账从今天起,打算记录一下自己从入门开发微信小程序到小程序上线的完整流程. 如果没有意外的话打算每周更新一次.20201231 准备工作 hbuilder.java环境(springb ...
【微信小程序开发小白零基础入门】微信小程序入门【建议收藏】
微信小程序入门文章目录微信小程序入门前言一.小程序的概述 1.小程序简介 2.小程序诞生 3.小程序功能 4.小程序创建步骤二.小程序的准备工作 1.注册开发者账号 2.小程序信息完善 3. ...
非典型程序员的微信小程序开发纪实
作为一个非典型程序员,祁劲松主导开发了一系列微信小程序(如IP查询.邮编库.查号吧+.手机归属.一把刀新华字典等).在开发过程中,他遇到了很多难题,并进行了多方位的思考,在他看来: 微信小程序的开发并 ...
【微信小程序开发小白零基础入门】微信小程序框架【建议收藏】
微信小程序框架文章目录微信小程序框架一.逻辑层 1.注册程序 1.App()函数 2.onPageNotFound()函数 3.getApp()函数 2.注册页面 1.初始数据 2.生命周期回调 ...
【微信小程序开发小白零基础入门】第一个入门级小程序【建议收藏】
文章目录一.第一个入门级小程序 1.新建项目 2.真机预览 3.代码上传 4.小程序版本二.小程序目录结构 1.项目配置文件 2.主体文件 3.页面文件 4.其他文件三.开发者工具功能介绍 1. ...
微信小程序开发分销制度济南_花店微信小程序开发教程
如何将自己的鲜花商品快速配送出去,避免鲜花过期浪费,是很多传统花店商家的难题.不过随着微信小程序的出现,这一难题也渐渐得到了解决.花店商家可以通过自己的小程序商城,打通线上渠道,可以加大推广.扩大销量 ...
微信小程序开发快速入门
最近整理文件,找到一个18年写的微信小程序开发快速入门,对于新手还是值得一看的,三年多过去了,可能一些接口已经更新了,不过,整体思想还是没变的. 如果你熟悉JavaScript,那你基本上看完这个文档 ...

微信小程序开发纪实-菜鸟新手入门