Smobiler上海石磨_.NET移动开发平台

标题: 微信组件开发 [打印本页]

作者: Lincy.Lin 时间: 2017-6-16 11:47
标题: 微信组件开发

一、网页创建插件

1. 登录官网:https://cloud.smobiler.com/，选择插件开发并创建插件,

[attach]979[/attach] [attach]980[/attach]

2. 控件信息填写

[attach]981[/attach]

配置key等信息，请在基础信息中填写，ios需要配置此信息才能在分享消息后返回本应用。其中value为开发者在微信开放平台注册应用获取的AppID。

ps:注册微信开发平台应用https://open.weixin.qq.com/cgi-bin/applist?t=manage/list&lang=zh_CN&token=cd93d5e3c86bf640ad5a23635fa3a170fbe28d89

[attach]982[/attach]

[attach]983[/attach]

注意：微信开发平台注册的应用ios的Bundle ID和安卓版本的包名需和smobiler云平台应用包名一致

[attach]1010[/attach]

4. 进入功能定义板块，点击添加组件方法（一个组件可以创建多个方法）

Ps:方法名是用户自定义的

[attach]984[/attach]

注意：1. 微信登录只是返回errorCode和code，具体用户数据需要根据code获取，参考：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419317851&token=8a8c6b182e33b865f55a7f3b2d9821cb0267fe08&lang=zh_CN

2. 微信开放平台注册应用创建移动应用时，android中平台信息的应用签名为签名文件的MD5值，且字母小写，没有冒号。例如：q1w2e3r4t5y6u7i8o9p0q1w2e3r4t5y6

Ps:md5获取在云平台应用-应用安卓打包中，如图：

[attach]985[/attach]

[attach]986[/attach]

5. 生成下载模版并在开发

注意：为了防止控件无法整合到app中，不要修改js文件的内容

a.移动端插件开发模板生成和下载

[attach]987[/attach]

[attach]988[/attach]

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

[attach]989[/attach]

二、结合到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

[attach]990[/attach]

react-native link react-native-sm-weixin

4. 用webstorm或Sublime Text打开WechatDemo，找到index.ios.js,修改代码,用xcode打开ios中项目文件进行调试

[attach]991[/attach]

5. 用webstorm或Sublime Text打开SingtureDemo，找到index.android.js,修改代码同上,用Android Studio打开android项目文件进行调试

二、 ios和android平台开发

1. android手机端开发

注意：为了防止控件无法整合到app中，不要修改用于js交互的函数名

1. 将下载的模版解压，在android studi上打开其中的android文件夹

2. 参照微信开放平台资源中心接入文档开发

参考：https://open.weixin.qq.com/cgi-b ... f3b2d9821cb0267fe08

[attach]992[/attach]

3. 修改文件支持控件显示和js交互，具体请参考sm_weixin.zip中android文件夹

4. 微信组件中包含需要从微信返回应用的Activity，所以此需要放在包名目录下

注意：这是微信独有的特例，一般组件不考虑

[attach]993[/attach]

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文件夹

参照微信开放平台资源中心接入文档开发

参考：https://open.weixin.qq.com/cgi-b ... 65f55a7f3b2d9821cb0

[attach]994[/attach]

4.完成修改后可调试。

四、完成开发后上传到网页

1. 找到WeixinDemo／node_modules／react-native-sm-weixin文件夹，将ios和android文件夹复制替换掉原来WeixinDemo／plugin／M22-sm-weixin中的ios和android文件夹。

注意：android文件夹中的build文件夹请删除，是运行调试需要的，上传并不需要，且会使压缩文件过大。

2. 把组件压缩成zip文件

注意：不要压缩最外层文件夹。

[attach]995[/attach]

3. 获取的压缩文件上传到网页

[attach]996[/attach]

4. 至此，组件的开发就完成了

五、服务端开发

1.将一、5小点生成的服务端模板添加到项目中，并创建服务端创建组件，如图：

[attach]997[/attach]

创建组件模板

[attach]998[/attach]

注意：微信组件添加后重新生成项目才可在工具箱中找到微信组件

1.将微信组件添加到窗体，并进行应用注册，分享等

[attach]1000[/attach]

[attach]999[/attach]

3.启动服务端项目

[attach]1009[/attach]

服务端代码：[attach]1011[/attach]

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

六、云平台应用打包插件

1.应用打包步骤可查看（http://smobiler.com/yunapp.aspx），在应用打包时选择4x版本打包

[attach]1001[/attach]

2.在应用打包时进行插件添加再进行打包，并将安装包安装到手机上

[attach]1002[/attach]

3.手机客户端显示效果

a..微信应用注册

注意：每个设备要进行一次微信应用注册

[attach]1003[/attach]

b.分享好友效果显示

[attach]1004[/attach] [attach]1005[/attach] [attach]1006[/attach]

c.分享朋友圈

[attach]1007[/attach] [attach]1008[/attach]

作者: sxczzll 时间: 2017-9-1 22:47
本帖最后由 sxczzll 于 2017-9-1 22:50 编辑

是不是说SMO只能发送文字链接，那种带有小图标的文字链接能不能发呀？那种带图的链接实现起来是不是有难度？如果能支持带缩略图的链接就更好了

作者: Lincy.Lin 时间: 2017-9-5 16:38
可以支持带缩略图的分享，具体可查看微信分享参数开发文档：http://www.smobiler.com/Help/htm ... eEntity__ctor_1.htm

作者: claro 时间: 2019-3-27 13:51
上面的链接已经打不开了

欢迎光临 Smobiler上海石磨_.NET移动开发平台 (https://www.smobiler.com/)