E企盈营销工具技术服务商 热线:4006-838-530

wepy小程序开发框架学习(一)

E企盈直播平台营销卖货系统

一、安装npm由于新版的NodeJS已经集成了npm,我们可以安装NodeJS来实现安装npm。首先去nodejs官网(https://nodejs.org/en/)上下载最新版的nodejs,如下图,点击下载下载完成以后,一路next即可安装,如需更改安装目录,请自行配置。安装完成以后验证npm是否安装成功:运行cmd命令npm -v得到如下图所示,我的版本是6.0.0表示安装成功。二、安装wepy用管理员身份打开cmd命令窗口,然后执行cmd命令npm install wepy-cli -g进行全局安装wepy(此命令也是更新wepy的命令),如下图所示,表示wepy安装成功,标红处为版本号此处需注意的是要用管理员身份运行cmd命令,如非管理员身份运行可能会出现权限问题导致安装失败,如下图:三、开始一个小程序wepy提供一些小程序的模板,就是一些小例子,下面我们来看看这些模板运行cmd命令进入自己想要下载的目录,然后输入wepy list回车查看官方提供的模板,如下图(标红处为模板,标黄处为下载模板的命令)下面我们来下载一份空模板来看看,在cmd命令窗口输入wepy init empty myproject如下图:出现一些乱码,编码格式的问题,不影响下载代码,可以忽略,我们继续命令执行会让你输入Project name,AppId等等,我直接回车使用默认最后一行问你是否使用ESLint,我们先选择否(输入n即可),先拿到一个最简单的模板看看,具体后面再说然后我们去我们的模板看看它的结构(我用的Sublime Text3编程工具打开文件夹,这个编程工具根据自己的喜好选择就好)首先我们看一下项目结构(这是编译之前的结构)├── src                    代码编写的目录(该目录为使用WePY后的开发目录)|   ├── pages              WePY页面目录(属于完整页面)|   |   ├── index.wpy      index页面(经build后,会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件)|   └── app.wpy            小程序配置项(全局数据、样式、声明钩子等;经build后,会在dist目录下生成app.js、app.json和app.wxss文件)└── package.json           项目的package配置另外还有一些配置文件如project.config.json:对应小程序里的project.config.json文件里的某些属性配置wepy.config.js:wepy编译方面的某些配置下面执行cmd命令来下载npm依赖npm install如下图所示下面我们来对这个模板编译一下看看,继续执行cmd命令:wepy build -w此命令表示开启实时编译,我们对这个项目所做的更改都会实时编译到编译目录里报了个WARNING,未安装wepy-eslint,但不影响编译,查看了一下是上面选择是否使用eslint,上面我们选择了否,而下载的模板中使用了这个,我们可以找到相关的配置文件,关掉后就不报警了,即将wepy.config.js里的eslint的属性值改为false即可,如下图所示:在上图,我们同时也看到了,多了一个dist目录,这个目录就是编译的目录还有一个node_modules目录,是npm下载依赖的目录(这个目录在执行npm install时就已经创建)编译完成后,我们就可以把项目的根目录加到小程序开发工具上查看,如下图所示:这样,一个hello world就完成了,但是项目可能运行会报错,解决方法如下图,点击右上角详情按钮,会出现被我标蓝的窗口,将es6转es5取消选择即可之所以将项目的根目录加入小程序开发工具中即可运行,是因为1.7.0 之后的版本init新生成的代码包会在根目录包含project.config.json文件,这个文件中设置了小程序的根目录,所以直接把项目的根目录加入到小城西开发工具上可以运行,若是1.7.0之前版本,也可以通过手动编写该文件,然后这样加入小程序开发工具运行,编写内容如下{  “description”: “project description”,  “setting”: {    “urlCheck”: true,    “es6”: false,    “postcss”: false,    “minified”: false  },  “compileType”: “miniprogram”,  “appid”: “touristappid”,//小程序的appid  “projectname”: “Project name”,//小程序的项目名称  “miniprogramRoot”: “./dist”//根目录}

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » wepy小程序开发框架学习(一)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏