用户
 找回密码
 立即注册

40

主题

340

帖子

1456

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1456
发表于 2017-6-16 11:47:42
一、 网页创建插件
1. 登录官网:https://cloud.smobiler.com/,选择插件开发并创建插件,
        

2. 控件信息填写

配置key等信息,请在基础信息中填写,ios需要配置此信息才能在分享消息后返回本应用。其中value为开发者在微信开放平台注册应用获取的AppID。
ps:注册微信开发平台应用https://open.weixin.qq.com/cgi-bin/applist?t=manage/list&lang=zh_CN&token=cd93d5e3c86bf640ad5a23635fa3a170fbe28d89
注意:微信开发平台注册的应用ios的Bundle ID和安卓版本的包名需和smobiler云平台应用包名一致
4. 进入功能定义板块,点击添加组件方法(一个组件可以创建多个方法)
Ps:方法名是用户自定义的
2. 微信开放平台注册应用创建移动应用时,android中平台信息的应用签名为签名文件的MD5值,且字母小写,没有冒号。例如:q1w2e3r4t5y6u7i8o9p0q1w2e3r4t5y6
   Ps:md5获取在云平台应用-应用安卓打包中,如图:

5. 生成下载模版并在开发
注意:为了防止控件无法整合到app中,不要修改js文件的内容
a.移动端插件开发模板生成和下载


b.服务端插件开发模板生成

二、结合到react-native,用来帮助做开发调试
(1)、 windows
1. 从网上下载node.js的官方4.1版本或更高版本。
2. 建议设置npm镜像以加速后面的过程(或使用科学上网工具)。
npm config set registry https://registry.npm.taobao.org --global  
npm config set disturl https://npm.taobao.org/dist --global
3. 安装react-native命令行工具
npm install -g react-native-cli

(2)、 mac
1. 从网上下载node.js的官方4.1版本或更高版本。
2. 建议设置npm镜像以加速后面的过程(或使用科学上网工具)。
npm config set registry https://registry.npm.taobao.org --global  
npm config set disturl https://npm.taobao.org/dist --global
3. 安装react-native命令行工具
npm install -g yarn react-native-cli
4. 安装完yarn后同理也要设置镜像源:
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
5. 如果你看到EACCES: permission denied这样的权限报错,那么请参照上文的homebrew译注,修复/usr/local目录的所有权:
sudo chown -R `whoami`/usr/local

(3)、 创建项目并添加组件
1. 创建并进入项目
react-native init WechatDemo
cd WechatDemo
2. 在WechatDemo下新建文件夹plugin,并在模版解压后放入文件夹plugin中
3. 在终端WechatDemo目录下输入命令
npm install --save plugin/M22_sm_weixin
react-native link react-native-sm-weixin
4. 用webstorm或Sublime Text打开WechatDemo,找到index.ios.js,修改代码,用xcode打开ios中项目文件进行调试
5. 用webstorm或Sublime Text打开SingtureDemo,找到index.android.js,修改代码同上,用Android Studio打开android项目文件进行调试

二、 ios和android平台开发
1. android手机端开发
注意:为了防止控件无法整合到app中,不要修改用于js交互的函数名
1. 将下载的模版解压,在android studi上打开其中的android文件夹
2. 参照微信开放平台资源中心接入文档开发

3. 修改文件支持控件显示和js交互,具体请参考sm_weixin.zip中android文件夹
4. 微信组件中包含需要从微信返回应用的Activity,所以此需要放在包名目录下
注意:这是微信独有的特例,一般组件不考虑


5. 完成修改后可调试。
注意:调试时,微信开放平台中移动应用对应的包名和应用签名请参照xcode中的Bundle Identifier 和Android Studio中app的AndroidManifest.xml中的package,应用签名请参照http://blog.csdn.net/danfengw/article/details/53486446,MD5格式记得注意

2. ios手机端开发
注意:为了防止控件无法整合到app中,不要修改用于js交互的函数名
1. 用xcode打开ios文件夹中**.xcodeproj文件
2. 开发者需要在工程中链接上:SystemConfiguration.framework, libz.dylib, libsqlite3.0.dylib, libc++.dylib, Security.framework, CoreTelephony.framework, CFNetwork.framework
3. 修改文件支持控件显示和js交互,具体请参考sm_weixin.zip中ios文件夹
参照微信开放平台资源中心接入文档开发
4.完成修改后可调试。
注意:调试时,微信开放平台中移动应用对应的包名和应用签名请参照xcode中的Bundle Identifier 和Android Studio中app的AndroidManifest.xml中的package,应用签名请参照http://blog.csdn.net/danfengw/article/details/53486446,MD5格式记得注意


四、完成开发后上传到网页
1. 找到WeixinDemo/node_modules/react-native-sm-weixin文件夹,将ios和android文件夹复制替换掉原来WeixinDemo/plugin/M22-sm-weixin中的ios和android文件夹。
注意:android文件夹中的build文件夹请删除,是运行调试需要的,上传并不需要,且会使压缩文件过大。
2. 把组件压缩成zip文件
注意:不要压缩最外层文件夹。
3. 获取的压缩文件上传到网页
4. 至此,组件的开发就完成了

五、服务端开发
1.将一 、5小点生成的服务端模板添加到项目中,并创建服务端创建组件,如图:
创建组件模板
注意:微信组件添加后重新生成项目才可在工具箱中找到微信组件
1.将微信组件添加到窗体,并进行应用注册,分享等
3.启动服务端项目

服务端代码:
ps:代码中微信组件方法和参数均可自定义,此代码仅供参考

六、云平台应用打包插件
1.应用打包步骤可查看(http://smobiler.com/yunapp.aspx),在应用打包时选择4x版本打包
2.在应用打包时进行插件添加再进行打包,并将安装包安装到手机上
3.手机客户端显示效果
a..微信应用注册
注意:每个设备要进行一次微信应用注册

b.分享好友效果显示
      


c.分享朋友圈
   

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
使用道具 举报 回复
发表于 2017-9-1 22:47:15
本帖最后由 sxczzll 于 2017-9-1 22:50 编辑

   是不是说SMO只能发送文字链接,那种带有小图标的文字链接能不能发呀?那种带图的链接实现起来是不是有难度?如果能支持带缩略图的链接就更好了
使用道具 举报 回复 支持 反对
发表于 2017-9-5 16:38:38
可以支持带缩略图的分享,具体可查看微信分享参数开发文档:http://www.smobiler.com/Help/htm ... eEntity__ctor_1.htm
使用道具 举报 回复 支持 反对
发表于 2019-3-27 13:51:40
上面的链接已经打不开了
使用道具 举报 回复 支持 反对
发新帖
您需要登录后才可以回帖 登录 | 立即注册