使用wepy开发微信小程序商城第一篇:项目初始化
使用wepy开发微信小程序商城
第一篇:项目初始化
前言:
wepy小程序项目初始化的操作,官方文档看了好几遍,感觉写得不是很清楚。
这篇写得挺好的:小程序开发之wepy
1.初始化项目
(1)全局安装或者更新wepy命令行工具
npm install wepy-cli -g
(2)在开发目录中生成Demo开发项目
wepy init standard project-name
(3)编译
cd project-name npm install wepy build --watch 或者 npm run dev
2.目录结构
├── dist 微信开发者工具指定的目录(该目录由WePY的build指令自动编译生成,请不要直接修改该目录下的文件)
├── node_modules
├── src 代码编写的目录(该目录为使用WePY后的开发目录)
| ├── components WePY组件目录(组件不属于完整页面,仅供完整页面或其他组件引用)
| | ├── com_a.wpy 可复用的WePY组件a
| | └── com_b.wpy 可复用的WePY组件b
| ├── pages WePY页面目录(属于完整页面)
| | ├── index.wpy index页面(经build后,会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件)
| | └── other.wpy other页面(经build后,会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件)
| └── app.wpy 小程序配置项(全局数据、样式、声明钩子等;经build后,会在dist目录下生成app.js、app.json和app.wxss文件)
└── package.json 项目的package配置
3.打开微信开发者工具
4.选择小程序项目
5.添加项目
点击界面右下角的“+”加号
6.选择项目目录
注意1:项目目录选择项目根目录下得dist
注意2:AppID点击“小程序”,会自动生成
7.项目成功打开的界面如下
点击右上角“详情”,配置
配置如下,
1.关闭ES6转ES5。 重要:漏掉此项会运行报错。
2.关闭上传代码时样式自动补全。 重要:某些情况下漏掉此项也会运行报错。
3.关闭代码压缩上传。 重要:开启后,会导致真机computed, props.sync 等等属性失效。
8.项目初始化完成
回到编辑器(我用的是vscode)编写代码,运行过npm run dev,保存会自动编译,微信开发者工具里会自动刷新预览。
下一篇会写页面路由和几个主要的页面,如首页、购物车等
参考文章:小程序开发之wepy
使用wepy开发微信小程序商城第一篇:项目初始化的更多相关文章
- 使用wepy开发微信小程序商城第二篇:路由配置和页面结构
使用wepy开发微信小程序商城 第二篇:路由配置和页面结构 前言: 最近公司在做一个微信小程序的项目,用的是类似于vue的wepy框架.我也借此机会学习和实践一下. 小程序官方文档:https://d ...
- 使用wepy开发微信小程序商城第三篇:购物车(布局篇)
使用wepy开发微信小程序商城 第三篇:购物车(布局篇) 前两篇如下: 使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 基于上两篇内容,开始 ...
- 微信小程序创建第一个项目
一.打开微信开发者工具,扫码登录 二.点击右侧的加号,添加小程序 第三步:创建成功后,报错 VM82:1 cloud init error: Error: invalid scope 没有权限,请先开 ...
- 使用wepy开发微信小程序01——常用的组件
1.axio.js 'use strict' import axios from 'axios' import wepyAxiosAdapter from 'wepy-plugin-axios/dis ...
- 《微信小程序商城开发实战》笔者的新书,欢迎各位粉丝上京东购买
作者图书京东链接,请点击------>>> **微信小程序商城开发实战** 附京东真实评价截图: 编辑推荐 在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性 ...
- 零基础开发一款微信小程序商城
零基础开发一款微信小程序商城 一个朋友问我能不能帮忙做个商城?我一个完整网页都写不出的 菜鸟程序员,我该怎么拒绝呢?好吧,看在小程序这么火的形势下,我还是答应了!找了个开源项目,差不多花了三天时间搞定 ...
- 《微信小程序商城开发实战》唐磊,全网真实评价截图,不吹不黑,全部来自网友的真实评价
偶尔看了下网友的销量和评价,感觉还不错,因为市面上大多关于小程序的书籍可能写的不够全面,要么只是点到为止的大致罗列,要么就是只简单介绍一下小程序的 界面设计这块.这样很难给学习小程序开发的人一个完成的 ...
- 用Vue.js开发微信小程序:开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- C#开发微信小程序
个人见解,欢迎交流,不喜勿喷. 微信小程序相比于微信公众号的开发,区别在于微信小程序只请求第三方的数据,整个界面的交互(view)还是在微信小程序上实现,前后端完全分离,说白了,微信小程序开发与具 ...
随机推荐
- worldpress 的 GPG 加密插件
worldpress 的 GPG 加密插件资料来源 https://trog.qgl.org/wpgpg/这个插件的作用是,用GPG 加密worldpress 的输出内容,然后在chrome浏览器中上 ...
- 通过Debug-->Attach to Process的方式来调试网站
找到网站所对应的应用程序池
- postgresql sql语句 更改表名
SELECT'alter table "public"."'|| t.tablename||'"'||' rename to "'|| "l ...
- 今日SGU 5.8
SGU 109 题意:一个n*n的矩形,起点在1,1然后每次给你一个操作,走ki步,然后你可以删除任意一个点这次步走不到的,删了就不能再走了,然后问构造这种操作,使得最后删除n*n-1个点 剩下一个点 ...
- 【Codeforces Round #427 (Div. 2) D】Palindromic characteristics
[Link]:http://codeforces.com/contest/835/problem/D [Description] 给你一个字符串; 让你在其中找到1..k阶的回文子串; 并统计它们的数 ...
- [Angular & Unit Testing] Testing Component with Store
When using Ngrx, we need to know how to test the component which has Router injected. Component: imp ...
- android抓取各种log的方法
1.logcat (四类log buffer是main,radio.system.events) adb wait-for-device logcat adb logcat -v time > ...
- Android学习笔记进阶17之LinearGradient
具体的看一下博文:Android学习笔记进阶15之Shader渲染 package xiaosi.BitmapShader; import android.app.Activity; import a ...
- beego的orm ,用的数据库sqlite3
测试 beego的orm ,用的数据库sqlite3 1 package main import ( "fmt" "github.com/astaxie/beego/or ...
- BZOJ3277: 串(后缀自动机,Parent树,Dfs序)
Description 字符串是oi界常考的问题.现在给定你n个字符串,询问每个字符串有多少子串(不包括空串)是所有n个字符串中 至少k个字符串的子串(注意包括本身). Input 第一行两个整数n, ...