首页 > 编程语言> 文章详细

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

2021-01-07 09:58:52 阅读：527 来源： 互联网

标签：wxml 菜鸟程序开发 js 新手入门 json wxss png icon

微信小程序开发纪实

第一天

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

第一天

开发背景

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

已完成的项目链接
https://gitee.com/mycyberspace/wechat-link-applet

注册测试号，小程序号

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
│
└─utils
        util.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了

在这里插入图片描述

标签：wxml,菜鸟,程序开发,js,新手入门,json,wxss,png,icon
来源： https://blog.csdn.net/weixin_43596589/article/details/111224437

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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