开始
第一个微信小程序从申请账号开始。先到微信公众平台根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。
注册完成后,登录 小程序后台 ,我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了。
小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID)。
有了小程序帐号之后,我们需要一个工具来开发小程序。
安装开发工具
前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。
打开小程序开发者工具,用微信扫码登录开发者工具,就可以开发你的第一个小程序了。
但是开发前还是建议务必先熟悉一下小程序原生的框架、组件和API。
项目搭建
由于之前一直是使用webstorm开发项目,我是很用不惯微信小程序开发工具的,而且也不习惯那种开发模式。所以在万能的网上找了一些资料,发现了一个宝藏
WePY
WePY 框架在开发过程中参考了 Vue 等现有框架的一些语法风格和功能特性,对原生小程序的开发模式进行了再次封装,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。
这套框架大大便利了小程序的开发,开发风格接近Vue.js,支持组件化,而且支持使用第三方 npm 资源。
而且重要的是,我可以用webstorm开发微信小程序了。
1.安装wepy框架
运行命令npm install wepy-cli -g可以全局安装wepy。
2.生成项目
使用 wepy init standard yourProjectName 初始化项目。
其中,
Use ESLint to lint your code? //是否使用ESLint帮你检测代码?
Use Redux in your project? //是否使用Redux来处理状态管理?
Use web transform feature in your project? //是否在项目中使用Web转换特性?
//进入到demo目录中
cd wqwxdemo
//安装依赖
npm install
3.运行项目
用webstorm打开项目,执行下列命令,开启实时编译。
wepy build --watch
执行命令后,会发现项目目录下生成了一个dist目录。
打开微信开发者工具,选择小程序导入项目
选择项目所在目录的dist文件夹,填写你的微信小程序AppID,点击导入。就可以打开项目了。
但是Console中会有一个报错,如下:
解决方法:
点击微信开发者工具右上角‘详情’,将项目设置改为如下配置即可:
到此,一个项目就初始化完成了!接下开你就可以为所欲为了。
值得注意的问题是:
有时候你改了某块代码后发现小程序页面不管怎样都更新不了,这个时候你需要考虑到可能是缓存的问题,建议执行下面命令来清空缓存。
wepy build --no-cache --watch
最后
搭建好一个小程序项目后,你也许还不知从何处下手,那么建议你可以去github上看看。我推荐一个觉得不错的项目,代码地址:https://github.com/dyq086/wepy-mall.git
如果你想要一个漂亮的页面效果,可以结合一下UI组件库。
如:
weUI在线预览:
Vant Weapp在线预览:
谢谢观看