精华内容
下载资源
问答
  • 微信小程序UI模板

    2017-01-09 21:58:57
    微信小程序几套UI模板,对于前端功力不够的同学来时可是如获至宝,比如说我
  • 微信小程序UI模板之文章阅读器,实现了基本的文章浏览功能,供新手参考学习,其中文章采用内置形式,可更换成服务器提供,资源中不包含服务器配置。
  • 微信小程序常用UI模板之网络课程预约,实现了网校介绍/课程介绍/课程预约/功能,提供给初学者参考学习UI部分,资源未提供服务器配置。
  • 用户在线咨询医生微信小程序UI,包含所有源代码以及图片
  • 微信小程序电脑后台获取APPID 这个方法适用于自己申请的微信小程序(自己用的小程序) 打开微信小程序官网:https://mp.weixin.qq.com/ 并登陆 4.项目打包 打包后运行在微信小程序工具 才不会报错,如果报错app....

    1.选择模板 uni-ui
    在这里插入图片描述

    2.得到创建项目
    在这里插入图片描述

    3.获取APPid

    在微信小程序电脑后台获取APPID
    这个方法适用于自己申请的微信小程序(自己用的小程序)
    打开微信小程序官网:https://mp.weixin.qq.com/ 并登陆

    在这里插入图片描述
    在这里插入图片描述

    4.项目打包 打包后运行在微信小程序工具 才不会报错,如果报错app.json问题,查看此篇文章解决app.json问题
    打包后多以文件夹 unpackage

    打包方法:
    HBuilderX打包方法
    在这里插入图片描述

    vue-cli打包方法
    在这里插入图片描述

    5.打包后,微信小程序工具打开项目 ,如果报以下错误,看图操作

    在这里插入图片描述

    6.微信小程序部分设置:1.设置不校验合法域名 2.设置代理和端口
    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    7.运行到微信小程序
    在这里插入图片描述

    8.小程序发布需要先设置:
    将appID填入到使用uni-app开发的项目manifest.json中

    在这里插入图片描述

    9.具体发布小程序看 发布小程序流程

    10.因为我们使用的是uni-ui,所以必须要有uni-ui的样式,这里我已经将hello-uniapp-master官方演示案例下的common拿了过来
    全局使用uni-ui的样式,在App.vue中引入uni.css;
    同时在这一步开启小程序发布后,自动更新提示,自动更新最新版本小程序
    在这里插入图片描述

    11.初始化npm工程

    若项目之前未使用npm管理依赖(项目根目录下无package.json文件),先在项目根目录执行命令初始化npm工程:

    npm init -y
    

    cli项目默认已经有package.json了。HBuilderX创建的项目默认没有,需要通过初始化命令来创建。

    12.vuex配置,vuex封装
    注意:
    1.uni-ui自带store 不需要再重新安装,可以直接创建store文件引入使用
    2.在main.js内,将store对象挂载到vue实例中

    13.接口 uni.request接口封装

    14.创建项目根目录下components文件夹,放公共vue组件

    15.对微信小程序进行分包,uni-app分包步骤(如果不分包,后期打包代码太大会导致二维码预览失败,无法真机调试)

    16.微信登录看这篇

    17.如果需要自定义微信小程序的导航栏,点击微信小程序自定义tabBar

    18.正式开发时候,配置好请求后,在浏览器H5页面和微信小程序工具上,调用接口是正常的,但是真机预览时候,使用真正的手机去调接口,如果没有配置在小程序官方地址上配置ip,那请求接口会无效。

    配置ip:在小程序–开发–开发管理–开发设置–服务器域名–request合法域名

    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • 小程序所用到的各种图标都为你收集全了,还有各种模板样式,源文件,字体包,以及基础控件等。还有还等什么
  • 去年10月换了一家公司前端使用 uni-app 开发,老大买了 graceUI,于是上车...年后开工我们使用 graceUI 小程序独立开发版本做了个微信小程序项目,布局真的快了不少! 作者的 页面组件思想来自 flutter (群里听说...

    去年10月换了一家公司前端使用 uni-app 开发,老大买了 graceUI,于是上车了....

    算是不错吧,我用的时候是2.0版本,做了个项目,感觉还是有很多不完美的地方。

    年底框架作者发布了 3.0 版本,改进了很多很多。开始变得美好了。

    年后开工我们使用 graceUI 小程序独立开发版本做了个微信小程序项目,布局真的快了不少!

    作者的 页面组件思想来自 flutter (群里听说的),真的好用,各种兼容问题不在需要我们来解决了。。。

    加了付费群,响应速度很快,记得有一次反馈一个问题不到3小时官方就更新解决了。

    200 块钱(据说现在已经是 299)获取100多个组件还有模板商城还有很多好用的插件,算是划算了。

    不是托,只是为给力的国产点个赞吧.....

    官方网站 https://www.graceui.com/

    展开全文
  • 微信小程序UI设计规范及文档模版

    万次阅读 2019-06-30 22:22:25
    UI设计者整理一下,为方便UI设计师和交互设计师进行设计,微信提供一套可供Web设计和小程序使用的基础控件库;同时提供方便我们的移动端安卓和iOS开发者调用的资源。还没有UI设计基础的同学,可以暂时不用学习此规范...

     

    weixinxiaochengxu-ui-shejizhe

    UI设计者整理一下,为方便UI设计师和交互设计师进行设计,微信提供一套可供Web设计和小程序使用的基础控件库;同时提供方便我们的移动端安卓和iOS开发者调用的资源。还没有UI设计基础的同学,可以暂时不用学习此规范,等学完UI设计基本规范后再学习小程序的设计规范。

    基础样式库预览地址:https://weui.io

     

    下面附:规范文档PSD和sketch源文件下载。

     

    小程序UI视觉设计规范

     

    1. 字体规范

    常用字号为20,18,17,16,14,13,11(pt),使用场景具体如下(这里可以换算成px或dp):

     

     

    微信类字体的使用与所运行的系统字体保持一致,以导航为例,iOS与Android对应字体如下:

    导航(iOS和Android)

    字体颜色

    主内容Black黑色,次要内容Grey灰色;时间戳与表单缺省值Light灰色;大段的说明内容而且属于主要内容用Semi黑;

    蓝色为链接用色,绿色为完成字样颜色,红色为出错用色Press与Disable状态分别降低透明度为20%与10%;

    2. 列表视觉规范

    3. 表单输入视觉规范

    4. 按钮使用原则

    列表外按钮上文字标准

    按钮高度为44px下使用:颜色#000000 / #353535 字号18pt

    可点状态下文字调整透明度为60%

    不可点状态下文字调整透明度为30%

    列表外按钮上文字标准

    按钮高度为25px下使用:颜色#000000 / #353535 字号14pt

    页面线性按钮上文字标准

    按钮高度为35px下使用:颜色#09BB07 / #353535 字号16pt

    5. 图标使用原则

     

     

    规范文档PSD和sketch源文件已上传至百度网盘,下载地址:

    链接: https://pan.baidu.com/s/1hsvAlyW  密码: jvbf

    展开全文
  • WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 shitoujiandaobu 小程序:石头剪刀布(附代码说明) audiodemo 微信小程序开发之视频播放器 Video 弹...

    wx-gesture-lock  微信小程序的手势密码

    WXCustomSwitch 微信小程序自定义 Switch 组件模板

    WeixinAppBdNovel 微信小程序demo:百度小说搜索

    shitoujiandaobu 小程序:石头剪刀布(附代码说明)

    audiodemo 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义

    star 微信小程序开发之五星评分

    switchCity 微信小程序开发之城市选择器 城市切换

    huadong_del  微信小程序滑动删除效果

    jianhang_menu 微信小程序开发之圆形菜单 仿建行圆形菜单

    xiaoxiaoxiao_lazyload  实现微信小程序图片懒加载特效

    kangaiduowei  微信小程序:康爱多微商城:学习界面设计

    tianmao_dazhuanpan  小程序实现大转盘 仿天猫抽奖 跑马灯效果(有图有源码)

    weapp-meirong  微信小程序学习用demo推荐:美容商城;列表,预约

    baisi  微信小程序仿百思不得姐

    weapp-one 仿 「ONE · 一个」 的微信小程序

    netmusic-app  仿网易云音乐APP的微信小程序

    a_takeaway  微信小程序的外卖demo

    sideslip  微信小程序『侧边栏滑动』特效

    wx_plo  微信小程序之仿微信漂流瓶

    kwonWhere 微信小程序-知亦行

    audiodemo  微信小程序开发之视频播放 弹幕 弹幕颜色自定义

    wxChart  微信小程序图标插件

    guoku  微信小程序-果库

    snake  微信小程序-贪吃蛇小程序

    douban_movie  微信小程序-仿豆瓣电影

    RecordDemo  麦克风动画

    shishanggou  实现了包括常用组件,ajax获取数据,模板使用,路由等的使用,下拉刷新数据;

    jiajuzaixian  家具在线-演示如何使用下拉选项

    wechat-app-ipinbb  爱拼宝宝-功能非常全的电商应用

    TodayNews-wx  微信小程序-今日头条

    WXNative-bpgg  奔跑果果-微信小程序

    wechatapp-demo   是目前我发现的,实现实用功能较多的demo,推荐大家学习研究

    weapp-MatterAssistant  微信小程序-事项助手

    weapp-wymusic  微信小程序 仿网易云音乐

    weapp-wechat-nearby  微信小程序-仿找事吧app附近三公里

    bs  精简版百思不得姐

    WXBaiSi  微信小程序版 百思不得姐

    weapp-demo-breadtrip  基于面包旅行 API 制作的微信小程序示例

    html-to-wxml  小程序中将html内容转化成wxml可以显示的内容,方便用于小程序中显示

    kachezhijia  自卡车之家,有丰富的卡车司机和物流园区的资源,所以这个小程序可以说也是他们未来工作上的一个必将实施的项目。

    WxEmojiView   微信小程序Emoji展示输入组件alpha 0.1

    GankCamp-WechatAPP gank.io (干货集中营) 微信小程序 版本

    wechat-JD  微信小程序仿京东首页

    wechat-turntalbe-canvas  用微信小程序开发的Canvas绘制可配置的转盘抽奖。

    mangguoTv  微信小应用-小程序-demo-仿芒果TV

    wxreading  微信小程序跟读

    WeChatMeiZhi  微信小程序版妹纸图 API from gank.io

    CountDown  微信小程序倒计时组件

    weapp-github  微信小程序--github

    wechat-weapp-mapdemo  微信小程序开发demo-地图定位,非常简单的demo,只为了解一下微信小程序

    wechat-cnode  微信小程序 cnode社区版

    weapp-newsapp  微信小程序-公众号热门文章信息流

    wechat-weapp-taobao  微信小程序demo 仿手机淘宝

    timer  番茄时钟微信小程序版

    wechat-app-music  微信小程序:音乐播放器 技术栈: redux + es7 +labrador

    fenda-mock  使用微信小程序实现「分答」这款APP的基础功能

    Wa-UI  针对微信小程序整合的一套UI库

    wx-query  微信小程序 仿jQuery插件

    weapp-artand  微信小程序 Artand

    WeiXin-SmallApps-Information  微信小程序-仿今日头条

    weapp-wechat-zhihu  微信中的知乎--微信小程序

    WeApp  基于微信小程序开发的仿微信demo

    SmallApp  微信小程序

    wechat-v2ex 微信小程序-v2ex

    weipiao 微信小程序-微票

    DouBanBookApp   微信小程序之小豆瓣图书

    wxapp-calc 一个简单的微信小程序-简易计算器

    weapp-wechat-zhihu   模仿知乎的小程序

    wx-movies-demo   小程序--影讯

    caiquan  微信小应用,猜拳小游戏

    hayeah-wxapp-Breakfast  小林早厨微信小程序

    AppleMusic  微信小程序,仿Apple Music

    cnode_wechat-webapp 用cnode社区api做的微信小应用

    shoppingcar 一个点餐、购物的购物车效果

    wechat-weapp-mall 微信小程序实现移动端商城

    SmallAppForQQ  高仿手机QQ应用程序

    zhihudaily  微信小程序-知乎日报

    wechat-weapp-gank 微信小程序-干货投稿应用

    TeamToy  调用TeamToy API 的微信小程序 Demo

    douban 微信小程序(应用号)示例教程(豆瓣电影)

    展开全文
  • 小程序开发有段时间了,开发中遇到各种各样的UI需求,很多都是类似甚至重复。虽然可以使用template和include来实现代码复用,但是它们都没有逻辑处理能力,有时一些简单的逻辑,我们更加希望可以直接被模板内部...
  • 微信官方的小程序UI开发组件,包含常用的icon、list、表单等
  • 整个项目采用 Electron + Vue + Vuetify 开发,目的是想做一个可视化设计小程序的设计器,导出为 Taro 项目代码。 目前功能: 支持审查/复制单个 Taro UI 组件,修改参数实时可看。 支持查看/复制当前页面代码。 ...
  • 微信小程序 - 80个实用的微信小程序项目实例

    万次阅读 多人点赞 2020-09-10 18:48:35
    WXCustomSwitch微信小程序自定义 Switch 组件模板 WeixinAppBdNovel微信小程序demo:百度小说搜索 shitoujiandaobu小程序:石头剪刀布(附代码说明) audiodemo微信小程序开发之视频播放器 Video 弹幕 弹幕颜色...
  • 微信小程序电影模板

    千次阅读 2019-08-06 22:24:43
    轻量,可靠的小程序UI组件库 小程序端电影列表 发送请求方式 小程序端发送wx.request() 协议支持,只支持https 是否备案,经过icp备案 域名个数限制20个 云函数 第三方库(request,got) 根据第三方库...
  • 一套不错的微信综合购物商城小程序ui模板,分享给大家学习参考。内附详细的使用小程序开发工具打开编辑代码的说明文档
  • 微信小程序的 ColorUI扩展的商城模板 下载后,使用小程序开发工具导入后即可预览效果。 图片效果查看: 新发布了一个基于uni-app开发的仿转转商城APP的模板,有兴趣的朋友,可以去看看: ColorUI框架的GIT: (此...
  • 使用的是colorui的小程序UI框架。 colorui地址:https://www.color-ui.com/ index.wxml <view class="cu-custom" style="height:{{CustomBar}}px;"> <view class=&...
  • 本文将会着重介绍Vue的slot插槽,介绍完后将Vue插槽和微信小程序的template进行对比讲解。 本着多看文档的原则,介绍顺序按照文档的来。 插槽内容 // 父组件 <navigation-link url="/profile"> Your ...
  • 压缩包里面包含icon.css和main.css两个文件,是colorUI组件库的通用css,自行新建一个文件夹存在,从微信小程序的全局样式那引入即可
  • 使用的是colorui的小程序UI框架。 colorui地址:https://www.color-ui.com/ index.wxml <!--商品轮播图--> <swiper class="screen-swiper square-dot bg-white" indicator-dots="true" circular="true...
  • 免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
  • [荐] 微信小程序模板源码合集

    千次阅读 2017-10-09 12:32:20
    WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 shitoujiandaobu 小程序:石头剪刀布(附代码说明) audiodemo 微信小程序开发之视频播放器 ...
  • 微信小程序微信小程序开发实例

    千次阅读 多人点赞 2018-04-19 13:44:14
    WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 shitoujiandaobu 小程序:石头剪刀布(附代码说明) audiodemo 微信小程序开发之视频播放器 Video 弹幕 弹...
  • 微信小程序Demo:仿麦当劳微信小程序
  • 微信小程序+UI框架

    2021-02-28 22:28:48
    小程序基础样式库、star数为截至2021年1月27日统计 ColorUI 1、start 10.1k 2、鲜亮的高饱和色彩,专注视觉的小程序组件库 3、GitHub 地址:https://github.com/weilanwl/ColorUI 4、开发文档参考(编辑中):...
  • wordpress开源微信小程序星宿UI v1.0 更新说明 1.全新pods + rest api 所有基本字段可在wodress后台操作 2.回归星尘大图模式 3.新增文章可添加资源字段,与资源下载页面互通 4.新增首页紧急弹窗(相比公告权重高) 5...
  • 使用的是colorui的小程序UI框架。 colorui地址:https://www.color-ui.com/ index.wxml &lt;!--状态栏区域--&gt; &lt;view class="cu-custom" style="height:{{CustomBar}}px;"...
  • 基于ColorUI微信小程序,暂时留存,纯属测试,纯属测试
  • 本项目木代码只有微信小程序的页面,不包含后台的实现.包括用户名和密码文本和输入框,以及按钮的样式实现.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,972
精华内容 3,588
关键字:

微信小程序ui模板

微信小程序 订阅