精华内容
下载资源
问答
  • 微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app。 如果是第一次使用,需要先配置小程序ide的相关路径,才能运行...
  • Linux微信web开发者工具, 可在 linux 桌面环境跑起 微信开发者工具, 原理是 微信开发者工具 本质是 nw.js 程序, 把它移植到 linux 下没大问题. 负责编译 wxml 和 wxss 的 wcc 和 wcsc (可能还有其他功能), 则利用 ...
  • 2020年3月31日录 - 微信开发者工具使用教程 01-微信开发者工具的下载和安装 02-微信小程序账号的注册、登录、appid的获取 03-微信小程序开发和公众号开发模式的切换 04-微信小程序如何导入项目 05-不在以下request...
  • 微信开发者工具

    2018-09-25 11:48:10
    微信web开发者工具,下载即用。
  • 微信开发者工具-Linux版!!(在GITHUB是开源项目
  • weixin--shop 这是用微信开发者工具做的商店项目 在暑假的时候进行了微信小程序的学习,在学习完小程序后,做了商城项目来进行练手
  • 微信开发者工具 项目目录结构 目录结构 |---主目录(项目描述文件) | |---app.js 主逻辑文件 | |---app.json 主配置文件 | |---app.wxss 主样式表 |---子目录(页面描述文件) | |---index.js 分支页面逻辑文件 | |...

    微信开发者工具 项目目录结构

    目录结构

    |---主目录(项目描述文件)
    |       |---app.js      主逻辑文件
    |       |---app.json    主配置文件
    |       |---app.wxss    主样式表
    |---子目录(页面描述文件)
    |       |---index.js    分支页面逻辑文件
    |       |---index.json  分支页面配置文件
    |       |---index.wxss  分支页面样式表
    |       |---index.wxml  分支页面结构文件
    |---子目录(资源文件)
    
    展开全文
  • <p><img alt="" height="986" src="https://img-ask.csdnimg.cn/upload/1622557444324.png" width="1375" /></p>
  • 问题1:hbuilder不能调用正常调用微信开发者工具(调用之后显示在选择项目主页) 解决方法:打开manifest.json,点击微信小程序配置,输入你登录微信的appid(注意一定是要登录微信账号的),重启项目 问题2...

    问题1:hbuilder不能调用正常调用微信开发者工具(调用之后显示在选择项目主页)

    解决方法:打开manifest.json,点击微信小程序配置输入你登录微信的appid(注意一定是要登录微信账号的),重启项目

     

    问题2:开发者工具一直显示加载的问题

    解决方法:打开manifest.json,找到应用名称,将应用名称改成英文或拼音重启项目

    展开全文
  • 微信开发者工具(创建项目介绍)

    千次阅读 多人点赞 2020-05-27 21:45:08
    开发者工具下载安装 我们把开发者工具下载安装好后 (1)打开扫码登入开发者工具 出现以下页面,点击加号创建项目 填入我们在登入微信公众平台刚刚申请到的小程序的 AppID 如果不填appid创建的项目有些功能会无法...

    开发者工具下载安装

    我们把开发者工具下载安装好后

    (1)打开扫码登入开发者工具 出现以下页面,点击加号创建项目
    在这里插入图片描述

    在这里插入图片描述
    填入我们在登入微信公众平台刚刚申请到的小程序的 AppID
    在这里插入图片描述
    如果不填appid创建的项目有些功能会无法使用,如果创建的时候忘了,我们可以在创建好之后配置文件里配置
    在这里插入图片描述
    在这里我选择的是不使用云服务
    在这里插入图片描述
    创建项目成功后,自动生成了这个框架
    在这里插入图片描述

    下面介绍一下框架的作用

    app.js是小程序的脚本代码
    app.json是微信小程序全局的配置文件,我们可以在这个文件中配置小程序是由哪些页面组成的。
    配置小程序的窗口背景色
    配置导航条样式
    配置默认标题
    注意:该文件不可以添加任何注释

    在这里插入图片描述
    backgroundTextStyle ?
    navigationBarBackgroundColor 导航条样式(这里是导航条的背景颜色)
    navigationBarTitleText 导航条标题(这里是导航条的文本内容)
    navigationBarTextStyle 导航条文本样式(这里是字体的颜色)

    app.wxss 是整个小程序的公共样式,是全局的,其他任何地方都可以用到此样式。
    在这里插入图片描述
    在这个例子中,我们有两个页面index和logs页面,即欢迎页面和小程序启动日志的展示页,它们都是pages目录下,微信小程序的每一个页面的【路径+页面名】都需写在app.json的pages中,且pages中的第一个页面是小程序的首页。

    在这里插入图片描述
    每一个小程序页面都由四个同路径下的同名文件组成:
    在这里插入图片描述

    展开全文
  • 上一篇文章已经运行起了一个uni-app项目的小demo,但是运行在Chrome浏览器的H5页面,那在微信开发者工具中如何实时模拟查看该项目呢? 1.在微信开发者工具中运行 配置小程序IDE相关路径 说明:只有配置了才能在...

    上一篇文章已经运行起了一个uni-app项目的小demo,但是运行在Chrome浏览器的H5页面,那在微信开发者工具中如何实时模拟查看该项目呢?

    1.在微信开发者工具中运行

    1. 配置小程序IDE相关路径
      说明:只有配置了才能在微信小程序运开发者工具中运行成功
      打开运行设置

    添加小程序开发者工具路径
    2. 开启小程序IDE服务端口的设置—>安全设置—>安全 (开启)

    在这里插入图片描述
    3. 修改 manifest.json配置文件,添加自己的小程序AppId:
    在这里插入图片描述
    4. 进入test项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,生成对应的微信小程序项目,即可在微信开发者工具里面体验了。
    在这里插入图片描述
    5. 运行效果
    在这里插入图片描述

    2. 组件

    1)基础组件,与微信小程序相同;
    2)自定义组件,根据需要通过基础组件进行组合;
    3)uni-ui,是DCloud提供的基于vue组件的、flex布局的、无dom的跨全端扩展ui框架;
    4)插件市场,提供了更多扩展组件、模板,包括前端组件和原生扩展组件,具体见插件市场;

    1. 基础组件

    <view>
      <icon type="success" size="26"/>
      <button type="primary">页面主操作 Normal</button>
      <progress percent="20" show-info stroke-width="3" />
    </view>
    
    

    在这里插入图片描述

    2. 字体库的引入

    1、拷贝common目录到项目中,icon.css在common中,并修改引入的字体路径
    2、拷贝static目录到项目中,字体文件在static目录中。

    在这里插入图片描述
    在mainjs中引入iconfont.css

    // 引入全局css
    import './static/2002icon/iconfont.css'
    

    在组件中页面中使用:

    <text class="iconfont icon-jinru"></text>
    
    

    3. 自定义组件

    根目录下创建components目录,创建list.vue组件

    <template>
       <view class="container">
       	<view v-for="(item, index) in list" :key="index" class='list'>
       			  <view class='title-icon'>
       			       <image :src='item.imgSrc'></image>
       			  </view>
       			  <view  class='right bottom'>
       			  <text>{{item.title}}</text>
       			     <text class="iconfont icon-jinru"></text>
       			  </view>
       	</view>
       </view>
    </template>
    
    <script>
       export default {
       name: "list",
       data(){
       	return{
    
       	}
       },
       //属性
       props: {
           list: {
               type: Array,
               value: ""
           }
       },
       created() {
           console.log(999, this.list)
       }
    }
    </script>
    
    <style>
       .list {
     display: flex;
     height: 112rpx;
     line-height: 112rpx;
    }
    .list .title-icon {
     width: 48rpx;
     flex-grow: 0;
     margin-right: 24rpx;
     position: relative;
     
    }
    .list .title-icon image {
     width: 48rpx;
     height: 48rpx;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
    }
    .list .right {
     display: flex;
     flex-grow: 1;
     justify-content: space-between;
     position: relative;
     line-height: 112rpx;
    }
    .list .bottom::after {
     content: '';
     height: 1px;
     width: 100%;
     display: block;
     position: absolute;
     bottom: 0;
     left: 0;
     background-color: #E8ECED;
     transform: scaleY(0.5);
    }
    .list .right text {
     font-size: 34rpx;
     color: rgba(53,53,54,1);
    }
    
    </style>
    
    1. 父组件我的页面my.vue,引入自定义组件list.vue,并传参
    <template>
        <view class="person-ctn">
            <list v-bind:list="list"></list>
        </view>
    </template>
    
    <script>
    import list from "../../components/list.vue";
    export default {
        components: {
            list,
        },
        data() {
            return {
                list: [
                  { title: '我的推荐', imgSrc:require("../../static/tabbar/paper.png"), path: '/pages/myRecommend/myRecommend' },
                  { title: '推广同盟', imgSrc:require("../../static/tabbar/news.png"), path: '/pages/promote/promote' },
                  { title: '资金明细', imgSrc:require("../../static/tabbar/home.png"), path: '/pages/capital/capital' },
                  { title: '设置', imgSrc:require("../../static/tabbar/index.png"), path: '/pages/setting/setting' },
                ],
            }
        },
        methods: {
            
        }
    }
    </script>
    
    <style>
        .person-ctn {
            padding: 0 32rpx;
        }
    </style>
    

    最终效果:
    在这里插入图片描述

    3. uni-ui的使用

    1)uni-ui 是全端兼容的基于flex布局的ui库;
    2)可以使用 npm 的安装使用方式,也可下载相关组件直接使用;
    3)uni-ui
    不支持使用 Vue.use() 的方式安装
    4)uni-ui 依赖 scss,若是 HBuilderX 中创建的 uni-app
    项目,需要在 HBuilderX 中安装 scss 插件;如果是使用 cli 创建的 uni-app 项目,需要在项目下npm安装node-sass 和 sass-loader

    1. 初始化项目

    在 HBuilderX 中新建 uni-app 项目,进入项目目录,执行:

    npm init -y
    
    2. 安装 uni-ui
    npm install @dcloudio/uni-ui
    
    3. 使用 uni-ui

    index.vue引入组件,在template中使用

    <template>
        <view class="homework-ctn">
            <uni-card :title='title' :isFull="isFull" :note="note" :thumbnail="thumbnail" :extra="extra">
    			helloword
    		</uni-card>
    
    		<uni-pagination
                show-icon=false
                total=100 
                pageSize=10
                current=2
                prev-text="上一页"
                next-text="下一页"
            ></uni-pagination>
        </view>
    </template>
    
    <script>
    		import {uniCard, uniPagination} from '@dcloudio/uni-ui'
    		// 也可使用此方式引入组件
    		 import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' 
    	export default {
    		components: {
    			uniCard,
    			uniPagination
    		},
    		data() {
    			return {
    				title: '聊天',
    				extra: '快快学习uniapp',
    				note: '1910a班',
    				thumbnail: require('../../static/tabbar/index.png'),
    				isFull: true
    			}
    		}
    	}
    </script>
    
    
    <style>
    	.content {
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}
    
    	.logo {
    		height: 200rpx;
    		width: 200rpx;
    		margin-top: 200rpx;
    		margin-left: auto;
    		margin-right: auto;
    		margin-bottom: 50rpx;
    	}
    
    	.text-area {
    		display: flex;
    		justify-content: center;
    	}
    
    	.title {
    		font-size: 36rpx;
    		color: #8f8f94;
    	}
    </style>
    
    
    

    按需引入

    import uniCard from "../../uni-ui/uni-card/uni-card.vue"
    import uniPagination from "@/uni-ui/uni-pagination/uni-pagination.vue"
    

    4.运行报错后引入Hbuilderx没有安装编译sass插件

    点击 工具 —> 插件安装
    在这里插入图片描述
    安装新插件---->前往插件市场安装
    在这里插入图片描述
    在这里插入图片描述
    最终效果:
    在这里插入图片描述

    展开全文
  • 微信开发者工具登录的微信号没有未绑定该小程序项目的appid,第一种解决方案:需要绑定该微信账号为开发者账号,第二种解决方案:进入项目,找到微信小程序APPID 删除掉然后再重新启动运行。 直接删除微信小程序...
  • 关于微信开发者代码管理怎么添加gitee项目相关内容,包含微信开发者代码管理怎么添加gitee项目微信开发者代码管理怎么提交代码到远程git仓库
  • 1.运用命令行安装依赖 npm i 2.进入微信开发者工具点击工具选择构建npm,刷新页面就行.
  • 打开微信开发者工具点击右上角的版本管理 界面简介 如果是第一次系统会提示你初始化Git仓库,初始化完之后我们会看到左边有一列仓库,可以简单分为工作区,本地仓库,远程仓库 设置远程仓库 打开设置在通用选项...
  • 如何解决微信开发者工具新建项目只生成project.config.json 最近开始学习微信小程序的开发,在刚开始学习的时候,使用微信开发者工具,构建项目目录结构,只生成project.config.json文件,让人一头雾水,还没开始,...
  • 上一篇文章中https://blog.csdn.net/u014650759/article/details/90701866,我们已经安装好了微信开发者工具,并导入了一个Demo项目,这篇文章,将就开发者工具进行简单的介绍,方便你开发实用编译器,更好的开发小...
  • 因为之前文件没有进入编辑状态 解决方法: 1、双击打开 不想被覆盖的文件 或者 2、编辑一下 不想被覆盖的文件 这样打开新文件的时候就不会被覆盖了 立正的不会被覆盖,斜体的会被覆盖,that’s all~ ...
  • 微信开发者工具文件配置及结构

    千次阅读 2021-01-28 17:13:02
    一、微信开发者工具下载 首先进入微信公众号平台网页:https://mp.weixin.qq.com/ , 然后申请一个微信小程序账号, 其次下载微信开发者工具, 最后新建一个小程序的项目。如图所示: 二、微信开发者工具结构...
  • 本地项目添加到远程库 步骤: 1.新建小程序项目 2.版本管理,初始化Git仓库 3.版本管理,设置(仓库设置),添加远程库 4.版本管理,设置--网络和认证,认证方式选择用户名和密码。 5.版本管理,设置--...
  • uni-app无法运行到微信开发者工具

    千次阅读 2021-03-29 10:46:29
    uni-app无法运行到微信开发者工具 uni-app在微信开发者工具里运行: 注:首次运行需要配置微信开发者工具IDE的路径: 按照官网说的配置完成后运行,还是无法运行,需要配置微信开发者工具,打开服务端口: 配置...
  • 微信开发者工具提交代码到git

    千次阅读 2020-09-16 15:36:09
    2、打开微信开发者工具客户端 --- 版本管理 --- 初始化Git仓库 -- 默认初始化就可以 3、点击 --- 设置 -- 网络和认证 -- 填入码云的账号和密码 4、点击 --- 设置 -- 远程 -- 添加 5、点击抓取 6、...
  • 微信开发者工具介绍

    千次阅读 2020-09-22 11:53:06
    中国有句老话:“工欲善其事,必先利其器”,在实际介绍小程序开发之前,我们首先介绍一下微信开发者工具。可以毫不夸张地说,开发工具是否成熟很大程度上决定了一种技术能否迅速地被广大开发者所接受。 生成第一个...
  • 微信开发者工具git 删除项目

    千次阅读 2019-09-19 15:05:21
  • 是否有两个微信web开发者工具,全部删除掉 重新安装最新版本的开发者工具就能解决这个问题。 我就觉得这个太麻烦了,我总不能每天上来重新装一次 然后我就没有管这个弹框,我去目录下又点了一个.exe的启动文件 然后...
  • 为什么左边是白屏 就是运行不出来
  • HBuilder 连接至 微信开发者工具进行项目调试。
  • 我日常使用微信web开发者工具来学习和开发我们的微信小程序,在这过程中,我们可能会创建很多小程序项目,总会有时候,我需要删除我们不需要的项目,通常情况下,我们可以进入要删除的项目,在“项目”菜单下,找到...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 52,303
精华内容 20,921
关键字:

微信开发者工具项目