cd <项目名>
5. 安装依赖即可 npm install
-------------------------------------------------------- 踩坑记 --------------------------------------------------
在这里我提醒大家一定要看对路径和函数的写法
注意事项:
1. 在文件的结尾处 敲回车 必须有换行符, 且没有空格 否则报错 error Newline required at end of file but not found eol-last
2. 字符串必须是单引号
3. 注意空格
3.improt 结尾 没有分号 在程序里也不要加分号
4.wx:if="{{}}" 加双引号
5.CSS 样式图片和标签中的 img src='' 不可以静态加载, 只能网络加载
6. 小程序劲量不用原生的动画, 采用 css3 或者用组件库
7. 在实例化 app.wepy 的时候
- export default class extends wepy.app {
- config = {
- pages: [
'pages/home/home' 报错 --> 未找到 app.json 中的定义的 pages "pages/home/home" 对应的 JS 文件
解决方案:
1. 看路径是否正确!!!!
2. 清空 dist 文件 重新编译
- ]
- }
- }
- 8.VM1944:1 thirdScriptError sdk uncaught third Error module "npm/lodash.isarray/index.js" is not defined Error: module "npm/lodash.isarray/index.js" is not defined
解决办法:
1.npm init 在选择是否用 redux 选择否
2. 用命令行 npm install util -no-save , 安装完后 wepy build -no-cache, 最后 npm run dev 编译就行了.
3.app.wepy 引用了 redux 造成的问题 删除即可
- import { setStore } from 'wepy-redux'
- import configStore from './store'
- const store = configStore()
- setStore(store)
9. 报错: pages/home/home.js 出现脚本错误或者未正确调用 Page()
解决办法:
1.app.wepy 引用了 redux 造成的问题 删除即可
10. 统一标题在 app.wpy 里配置
- config = {
- path: [
- '页面路径' // 和页面中的 wpy.page 的命名没有关系
- ],
- window:{
- navigationBarBackgroundColor: '#1a9dff',
navigationBarTitleText: '建宇订水',--> 所有页面 wpy.Page 的顶部 title 名称都是一样的, 如果想给重新的 title 的话, 在对应的 wpy.page 页面设置 config = {navigationBarTitleText: '建宇订水 2'}--> 那么对应的 wpy.page 的 title 也就发生变化
- navigationBarTextStyle: '#ffffff'
- }
- }
10. 当你的底部的图片加载不出来时, 可以尝试关闭微信开发者工具, 在打开就好了
11. 当你页面报错为 没有引用 js 文件;
解决方案:
查看 dist 文件下对应的 js 文件 (此 js 文件是你报错没有引用的 js 文件), 仔细查看 js 的文件名, 是否与你的 src 目录下的 wpy 的文件命名一样. 如果不一样
请执行 npm clear 命令 就是你的 package.json 命令, 具体看你的 package.json 的文件命令, 如果没有该命令, 那就删除 dist 文件, 然后重新执行命令
npm build("build": "cross-env NODE_ENV=production wepy build --no-cache")
-------------------------------------------------------------wepy 心得 -------------------------------------------------------------
app.wpy 引用公共样式在 style 里写如路径
小程序被分为三个实例: 小程序实例 App, 页面实例 Page, 组件实例 Component. 其中 Page 实例继承自 Component;
- import wepy from 'wepy';
- // 声明一个 App 小程序实例 export default class MyAPP extends wepy.app { }
- // 声明一个 Page 页面实例 export default class IndexPage extends wepy.page { }
- // 声明一个 Component 组件实例 export default class MyComponent extends wepy.component { }
提示:
什么时候创建 App 小程序实例, 有什么时候创建 Page 页面实例, 又什么时候用组件?
App 小程序实例 这个没有什么异议 因为一个小程序, 只能维一一个 App 小程序实例
Page 页面实例 这个根据 UI 给了你几个效果图 他给你几个效果图, 你就创建几个 Page 页面实例
Component 组件实例 当复用, 循环, 某个特定的功能等, 这时候你就需要考虑是否要创建组件
App 小程序实例
- import wepy from 'wepy';
- export default class MyAPP extends wepy.app {
- customData = {};
- customFunction () { }
- onLaunch () {}
- onShow () {}
- config = {} // 对应 app.json 文件
- globalData = {}
- }
Page 页面实例和 Component 组件实例
- import wepy from 'wepy';
- export default class MyPage extends wepy.page {
- // export default class MyComponent extends wepy.component {
- customData = {} // 自定义数据
- customFunction () {} // 自定义方法
- onLoad () {}// 在 Page 和 Component 共用的生命周期函数
- onShow () {} // 只在 Page 中存在的页面生命周期函数
- config = {}; // 只在 Page 实例中存在的配置数据, 对应于原生的 page.json 文件
- data = {}; // 页面所需数据均需在这里声明, 可用于模板数据绑定
- components = {}; // 声明页面中所引用的组件, 或声明组件中所引用的子组件
- mixins = []; // 声明页面所引用的 Mixin 实例
- computed = {}; // 声明计算属性 (详见后文介绍)
- watch = {}; // 声明数据 watcher(详见后文介绍)
- methods = {}; // 声明页面 wxml 中标签的事件处理函数. 注意, 此处只用于声明页面 wxml 中标签的 bind,catch 事件, 自定义方法需以自定义 方法的方式声明
- events = {}; // 声明组件之间的事件处理函数
- }
注意 methods:
- // 正确示例
- import wepy from 'wepy';
- export default class MyComponent extends wepy.component {
- methods = {
- bindtap () {
- let rst = this.commonFunc();
- // doSomething
- },
- bindinput () {
- let rst = this.commonFunc();
- // doSomething
- },
- }
来源: http://www.qdfuns.com/article/46114/618e68469d30fb61dacf2991ea454d65.html