微信小程序开发注意事项

清疚 2022-12-03 02:21 261阅读 0赞

# 小程序开发流程 #

## 1.微信小程序开发工具 ##

下载地址:[微信小程序开发工具下载链接][Link 1]  
安装过程next完成即可。

## 2.开发环境搭建 ##

#### 1.安装nodejs ####

根据需求我的nodejs版本有要求  
**node**版本应该在v9.0 < node版本 <= v10.5.0此之间  
**nodejs**下载地址:**https://nodejs.org/dist/v10.5.0/**  
下载V10.5.0版本的**msi**文件  
![在这里插入图片描述][20200901145750723.png_pic_center]

打开msi文件next选择安装的位置**D:\\nodejs**，最后完成即可  
完成后环境变量**path**会自动添加**D:\\nodejs**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDQyMTYw_size_16_color_FFFFFF_t_70_pic_center]

完成后打开**cmd**验证**node**的版本号  
![在这里插入图片描述][20200901145800718.png_pic_center]

修改包路径：由于我们在执行npm install -g XXXX时，下载了一个全局包，这个包的默认存放路径位C:\\Users\\DELL\\AppData\\Roaming\\npm\\node\_modules下。存放在C盘不方便管理，所以要修改全局包和node缓存的存储位置。  
在安装位置D:\\nodejs下创建两个文件夹：  
node\_global 全局包下载存放  
node\_cache node缓存  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDQyMTYw_size_16_color_FFFFFF_t_70_pic_center 1]

在CMD窗口执行以下两条命令：  
npm config set prefix “D:\\nodejs\\node\_global”  
npm config set cache “D:\\nodejs\\node\_cache”  
执行完只要不出错就不会有输出提示，之后安装全局组件就会放到node\_global中。

2.本地开发流程  
1.导入项目  
首先生成ssh key  
生成教程：https://blog.csdn.net/lsyz0021/article/details/52064829  
生成完成后打开C:\\Users\\DELL.ssh\\id\_rsa.pub文件复制所有内容。

添加本地生成的ssh key，如果不添加不能正常下拉和推送。  
通过gitlab地址找到项目的下载地址。

2.开发注意事项  
打开微信小程序开发者工具，用微信登录。  
用小程序开发者工具导入项目yuyue  
导入后先确定自己的微信号有没有权限，如果没有权限会影响后续的开发，需要先跟获取开发权限。

(1)组件不能进行修改，能不能修改样式要看组件有没有暴露class样式。

所有页面都放在/pages 下的yuyue/ 文件夹下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDQyMTYw_size_16_color_FFFFFF_t_70_pic_center 2]

由于的组件文档不够详细，需要查看组件源码  
查看组件js文件源码判断组件可以使用哪些参数等。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDQyMTYw_size_16_color_FFFFFF_t_70_pic_center 3]

查看组件js文件源码判断组件是否可以自定义样式,如果没有externalClasses属性则代表没有样式可以自定义.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDQyMTYw_size_16_color_FFFFFF_t_70_pic_center 4]

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[20200901145750723.png_pic_center]: /images/20221123/c2dae689bb2e4058aef0a26ef0f8fe99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDQyMTYw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/d1e02304883446789e2cfc0fbcf672da.png
[20200901145800718.png_pic_center]: /images/20221123/096c0260cc98429a9763987095776624.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDQyMTYw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/aa71e9ffdd834e7cab59b3055d31cc82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDQyMTYw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/5eec1367c8d2468aa7c72d2c737deac9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDQyMTYw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/a0cd9965f7e44df6b7e6af072485372d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDQyMTYw_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/2734696475f944edb7838766b2d36a0d.png