解决问题方案：

云打包用户：

• 请升级最新的HBuilderX，云打包已修复此问题！

  离线打包用户：

• 下载最新版本5+sdk.配置AndroidManifest.xml时application节点配置的对象直接使用DCloudApplication或继承DCloudApplication的Application对象，可修复此问题！

　　小程序是一个“无需下载安装即可使用”的应用，所以越来越多的商家会开发属于自己的微信小程序，在电商行业，商家的战场也一并转移到了小程序上了，如何搭建一个小程序商城？开发一个商城小程序多少钱？搭建商城小程序要多久？……等等，成了商家考虑的问题。

　　那么，小程序商城开发周期是多长呢？

　　根据深圳小程序开发公司素与简智能科技和商城小程序开发技术人员的了解，和小程序开发价格一样是不唯一不定的。小程序的开发周期是根据小程序的功能开发难易决定的，不同的功能小程序的开发时长不同。对于小程序商城来说，由于其功能多而复杂，可能相对会长一点。

　　但是微信小程序商城开发周期也跟选择开发方式有关：

　　方式一、模版开发，时间较短，大约3-7天，直接套用模板上传图片和素材。

　　方式二、定制开发，开发时间则需要根据开发过程来确定，需要几周或者几个月的时间。因为这里涉及到对产品需求调研梳理、涉及审核、UI涉及、功能梳理审核、开发联调、测试和修改等。

　　由于前期需求沟通可能会花费大量的时间，所以开发者一定通过与开发公司的产品经理进行详细沟通，明确自己要实现什么功能，以及这个需求是否能实现，定制化开发更有利于项目的靠谱落地，在某种程度上，降低后期的时间。

　　那么，一般商城小程序如何制作开发呢？小程序商城一般有哪些板块？如：首页展示、商品管理、会员体系、营销系统、数据管理、管理与配送、O2O系统、分销、多商户等等，这些功能板块，小程序已经基本实现功能满足。

1.勾选支付

2. 获取支付渠道 （拿到如图值）

3.获取商品的详细信息 （拿到如图值）

3.1 为什么要获取商品的详细信息 原因如下：

4.发起支付

支付效果图

注：测试机必须要配置

参数详解

http://www.html5plus.org/doc/zh_cn/payment.html#plus.payment.getChannels

概述

目前HBuilder|HBuilderX中仅定义几种标准分辨率的启动图配置，而实际上存在很多不同分辨率的手机，导致启动图会进行拉伸或压缩引起变形，Android平台为了解决此问题就出现了可以适配各种尺寸的一种图片格式“.9.png”。这是一种特殊的图片格式，它可以指定特定的区域进行拉伸而不失真。
使用.9.png的优点：

1. 避免在非标准分辨率手机上缩放变形
2. 可以只配置1张或多张图片适配更多分辨率，减少apk的体积（推荐至少配置1080P高分屏启动图片）

.9.png图片和普通png图片的差异

1. .9.png图片和一般图片的区别在于.9.png图片有四条黑边，而一般的图片没有，这四条黑边就是用来拉伸和指定显示位置的。
2. 使用.9.png图片后，整个图片应该是包裹着你想要显示的内容的，而没有使用的话整个图片将会被拉伸。

制作.9.png图片

工具

1. 在Android sdk目录下的tools目录下，有一个叫做draw9patch.bat的文件，双击打开就可以使用（最新android SDK该文件已经不存在，若电脑不没有安装android studio，可下载附件工具编辑.9.png图片）
2. 使用android studio，因为android studio已经集成.9.png制作工具，只需选中需要生成的png文件，然后右键，点击create 9-patch file 选项。

   使用方法及问题解决方案

   详细制作步骤可参考链接：Android中.9图片的含义及制作教程
   可以使用在线.9.png生成工具：http://inloop.github.io/shadow4android/

.9.png配置使用

HBuilderX配置提交云端打包

在HBuilderX中打开manifest.json文件，切换到“App启动图配置”项，在“Android启动图片设置”栏中选择需要设置的.9.png图片（图片尺寸请按照提示尺寸对应上传），保存后提交云端打包即可。

注意：请更新HBuilderX为1.5.0及以上版本
注意：不同尺寸的启动图是为了适配不同分辨率的手机，所以提交打包时请务必上传不同尺寸的启动图，切忌上传多张同尺寸启动图

在插件市场有开发者做好的.9样例工程。

离线打包配置

离线打包配置需将图片命名为splash.9.png放置于res目录下的drawable-ldpi、drawable-xhdpi等目录下，如下图所示，运行到手机即可。

温馨提示：请勿在本贴下频繁刷广告，一经发现，直接封号。

仿 HTML5+/MUI 实现的自定义 toast 组件。

简介

uni-app 规范提供的 toast 都是居中显示的，没有类似 H5+/MUI 的那种底部 toast 模式。yu-toast 实现了多种模式的 toast 用于满足此类需求。

特性

• 支持底部、顶部、居中多模式的 toast
• 支持多个平台，App、H5、小程序。
• 多平台下，UI 风格保持一致。

缺点

页面发生切换时，toast 会跟随页面被覆盖，这一点的体验相对 uni 的 toast 要差一些，因为 uni 在多平台下调用的是系统的能力（H5 除外）。

其它选择

如果只是为了在 5+App 平台下使用底部的 toast，可以选择调用 5+API，比如这样：

// #ifdef APP-PLUS  
plus.nativeUI.toast('提示消息');  
// #endif

props

组件的 Prop 一定要按照约定的类型传参，如果有的同学对 Vue 组件的 Prop 不熟悉的，可以看下相关文档：Prop

传参示例

<!-- 正确的写法 -->  
<yu-toast :duration="3000"></yu-toast>  
<!-- 错误的写法 -->  
<yu-toast duration="3000"></yu-toast>

verticalAlign

提示框在水平方向始终是居中的，verticalAlign 用于配置在垂直方向上的位置。

methods

使用示例

下载完成后，将解压后的文件复制到 uni-app 项目目录中，如果是 cli 创建的项目则复制到 src 目录下。

<template>  
  <view>  
    <yu-toast  
      :message="message"  
      verticalAlign="center"  
      ref="toast"  
    ></yu-toast>  
    <button  
      type="primary"  
      @click="showToast"  
    >showToast</button>  
  </view>  
</template>  
<script>  
import yuToast from '@/components/yu-toast/yu-toast'  
export default {  
  data() {  
    return {  
      message: '提示信息'  
    }  
  },  
  components: {  
    yuToast  
  },  
  methods: {  
    showToast() {  
      this.$refs.toast.show()  
    }  
  }  
}  
</script>  
<style></style>

Change Log

v1.1.0

• perf: 组件的尺寸修改为 upx 单位，解决在部分设备上界面较小的问题。

v1.0.0

• 发布 yu-toast

结束

如果在使用 yu-toast 组件的过程中遇到问题，或有其它建议，欢迎各位同学交流讨论。

自小程序2017年1月9号正式上线以来，不论是中小商家，还是各大品牌巨头，都在抢占小程序这波风口，打造属于自己的小程序。截至目前，全国正式上线小程序超过100万个，小程序日均活跃用户稳居在2亿左右，而整个微信流量在10.5亿左右。微信小程序一路走来，功能越来越多，越来越开放。无论是实体商家，还是电商从业者，都需要了解企业开发小程序预算多少？微信小程序开发报价。

一、微信小程序开发之前必须要完成和注册认证，申请小程序费用为300元，如果有已经认证过的公众号就可以免费申请。

二、小程序开发：分为两种情况

第一种自己开发，费用的话就是自己技术的工资、绩效和服务器。

第二种找第三方开发公司，这里分为两种情况：

第1种是卖模板为主的网络公司。

优点是：价格低，几千块钱到万元之间就能搞定，方便，能够快速上线；

缺点是：修改功能麻烦，这里需要避免低价陷阱，不要到最后才发现模板性的修改功能所花的钱比买模板还贵。

第2种是定制开发为主的网络公司。

优点是：专为你的企业或者店面定制的，功能你来定，要求你来定，后期修改BUG方便，改东西也很方便。

缺点是：相对价格比较高！定制版的基本费用在上万元到十几万不等！不过贵也有贵的道理吧，毕竟功能做的更全面一点。

最后总结，至于找什么样的深圳小程序开发公司？花多少钱来开发？还是需要看贵公司准备的预算这块！推荐了解一下深圳素与简智能科技http://www.suyujane.com，价格适中，功能齐全。

如何快速搭建商城小程序？

1、如果你是自己搭建，耗时会很长，成本大不说，功能可能也不是很成熟，还有就是开发技术不成熟，这都是要考虑的问题。

2、第三方公司搭建小程序商城，你只需要提供相应的资料就可以了，有专业的开发团队，开发技术也过硬，能帮商家省去很多麻烦事情。

3、选择第三方公司一定要看它是否是合法，然后就是开发技术怎么样，还有就是看它是否可以满足你的开发需求了，深圳素与简智能科技（http://www.suyujane.com）这几点都是完全符合的，是性价比很好的选择。

微信小程序商城开发制作：

1、确定发展方向

在制作小程序商店之前，商家首先要明确自己制作的小程序到底有哪些功能，主要经营的业务有哪些。在制作小程序时，一定要加入一些店铺的特色在获得准确的定位之后，用户才能够有良好的体验，甚至有一些用户可以对商家的小程序商店印象深刻，有效的提高店铺的转换率。

2、模板的选择

由于现在很多的商家和企业都在开发微信小程序商店，在网络中也出现了很多的模板。小程序开发的门槛越来越低，所以在网络中也出现了各式各样的模板。此时商家在制作小程序商店时，需要对微信商城的模板进行筛选，必须要经过严格的筛选，选择一个符合商家标准的模板，在选择时切记千万不要过于华丽，太华丽的小程序模板会引得用户的反感。

3、开发费用

商家开发小程序商店需要提前准备好开发费用，由于大部分的企业不具备开发的条件，为寻找专业的开发团队制作小程序商城。不同的开发团队报价不同，企业需要对这些开发团队有一个初步的了解选择一个性价比比较高的团队合作，这样才能够降低自己的成本，同时也能够提升小程序商店的品质。

建议uni-app 集成electron 桌面开发能力。
如果真的实现了这套功能，我觉的以后会出现一个新兴的职业 全前端 or 全端 开发工程师

以下是uniapp代码
1、安卓代码

var main = plus.android.runtimeMainActivity();  
var pkName = main.getPackageName();  
var NotificationManagerCompat = plus.android.importClass("android.support.v4.app.NotificationManagerCompat");  
var packageNames = NotificationManagerCompat.from(main);  
console.log(JSON.stringify(packageNames));  
if (packageNames.areNotificationsEnabled()) {  
    console.log('已开启通知权限');  
}else{  
    uni.showModal({  
        title: '提示',  
        content: '请先打开APP通知权限',  
        showCancel: false,  
        success: function (res) {  
            if (res.confirm) {  
                var Intent = plus.android.importClass('android.content.Intent');  
                var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');//可设置表中所有Action字段  
                intent.putExtra('android.provider.extra.APP_PACKAGE', pkName);  
                main.startActivity(intent);  
            }  
        }  
    });  
}

2、苹果代码

var UIApplication = plus.ios.import("UIApplication");  
var app = UIApplication.sharedApplication();  
var enabledTypes  = 0;  
if (app.currentUserNotificationSettings) {  
    var settings = app.currentUserNotificationSettings();  
    enabledTypes = settings.plusGetAttribute("types");  
} else {  
    //针对低版本ios系统  
    enabledTypes = app.enabledRemoteNotificationTypes();  
}  
plus.ios.deleteObject(app);  
if ( 0 == enabledTypes ) {  
    uni.showModal({  
        title: '提示',  
        content: '请先打开APP通知权限',  
        showCancel: false,  
        success: function (res) {  
            if (res.confirm) {  
                var UIApplication = plus.ios.import("UIApplication");  
                var NSURL = plus.ios.import("NSURL");  
                var setting = NSURL.URLWithString("app-settings:");  
                var application = UIApplication.sharedApplication();  
                application.openURL(setting);  
                plus.ios.deleteObject(setting);  
                plus.ios.deleteObject(application);  
            }  
        }  
    });  
}  

多数引发此问题的小伙伴，都是在引入外部 CSS 时使用了如下写法：

@import url("/graceUI/graceUI.css");

应当修改下路径为相对路径的格式，如下：

/* 写法一 */  
@import url("./graceUI/graceUI.css");  
/* 写法二 */  
@import "./graceUI/graceUI.css";

caniuse库过期问题的原因

uni-app的编译器是基于npm的，依赖了众多包括webpack在内的npm库，这些库又引用了一个三方库caniuser-lite。
caniuser-lite这个库的代码里有个浏览器兼容数据的更新检查，过老的数据影响自动补齐css前缀。
开发者平时写uni-app时并不需要手动补浏览器的css前缀，就是因为这个库在自动补前缀。
这个库它自己每半年过期一次，过期后会报错如下：

Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`

这个报警不影响编译成功，只是告警提示

对于熟悉npm的开发者，这个报警不足为奇，按命令提示更新即可。
但HBuilderX的很多开发者不熟悉npm，遇到问题可能就不知该怎么办了。
目前可用的解决方案如下几种：

解决方案1，升级HBuilderX或cli

不要用半年前的HBuilderX，或cli，持续保持升级。（HBuilderX2.8.11之前的版本存在过期问题，升级到2.8.11即可）

解决方案2，在老版HBuilderX下手动升级caniuse-lite的npm库

如果不想升级HBuilderX ，也可在老版下解决问题。

• 项目是HBuilderX创建的
  1. 打开HBuilderX的安装目录, HBuilderX/plugins/uniapp-cli
  2. 删除node_modules以及package-lock.json
  3. 在当前目录执行npm install

• 如果你的项目是cli创建的，请自行在cli环境下升级npm包